How to stretch flexbox to fill the entire container in Bootstrap?

Last Updated : 25 Jun, 2024

We are given an HTML document (linked with Bootstrap) with a flexbox and a container. The goal is to stretch the flexbox to fill the entire container.

Table of Content

Using Bootstrap flex-fill class

The .flex-fill class stretches the width of an element to fill the entire horizontal space. If there are multiple sibling elements on which this class is applied, the horizontal space is equally divided among them.

Syntax:

<div class="flex-fill"></div>

Example: The example shows how to stretch the flexbox to fill the entire container in Bootstrap.

html 
<!Doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">

    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous">

    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous">
    </script>

    <title>GFG Bootstrap Flexbox</title>
</head>

<body>
    <p>Single flexbox without .flex-fill</p>

    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border">
            GFG Flexbox 1
        </div>
    </div>

    <p>Single flexbox with .flex-fill</p>

    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border flex-fill">
            GFG Flexbox 1
        </div>
    </div>

    <p>Multiple flexbox without .flex-fill</p>

    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border">
            GFG Flexbox 1
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 2
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 3
        </div>
    </div>

    <p>Multiple flexbox with .flex-fill</p>

    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border flex-fill">
            GFG Flexbox 1
        </div>
        <div class="bg-success p-2 border flex-fill">
            GFG Flexbox 2
        </div>
        <div class="bg-success p-2 border flex-fill">
            GFG Flexbox 3
        </div>
    </div>
</body>

</html>

Output:

Using Bootstrap's flex-grow Class

In this approach, .flex-grow-1 stretch the element to its maximum width by giving the other elements (if any) only the necessary amount of space.

Syntax:

<div class="flex-grow-1"></div>

Example: The example shows how to stretch the flexbox to fill the entire container in Bootstrap.

html 
<!Doctype html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1">

    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous">
    
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js"
        integrity=
"sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW"
        crossorigin="anonymous">
    </script>
</head>

<body>
    <p>Single flexbox without .flex-grow-1</p>

    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border">
            GFG Flexbox 1
        </div>
    </div>

    <p>Single flexbox with .flex-grow-1</p>

    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border flex-grow-1">
            GFG Flexbox 1
        </div>
    </div>

    <p>Multiple flexbox without .flex-grow-1</p>

    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border">
            GFG Flexbox 1
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 2
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 3
        </div>
    </div>

    <p>Multiple flexbox with .flex-grow-1</p>

    <div class="d-flex bg-danger container">
        <div class="bg-success p-2 border flex-grow-1">
            GFG Flexbox 1
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 2
        </div>
        <div class="bg-success p-2 border">
            GFG Flexbox 3
        </div>
    </div>
</body>

</html>

Output:

Comment

Explore