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
Using Bootstrap's flex-grow Class

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/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous">

    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css"
        rel="stylesheet" integrity=
"sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1"
        crossorigin="anonymous">
    
    <script src=
"https://cdn.jsdelivr.net/npm/[email protected]/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:

How to stretch div to fit the container ?

tanujatiwari04

Improve

Article Tags :

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

Using Bootstrap flex-fill class

Syntax:

Using Bootstrap's flex-grow Class

Syntax:

Similar Reads

Thank You!

What kind of Experience do you want to share?