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

Last Updated : 21 Dec, 2020

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. This can be achieved by two different approaches, using flex-fill or flex-grow classes in Bootstrap.

Approach 1: Using 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:

<!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:

Approach 2: Using flex-grow class: We can also alter the width of the flexbox by using Bootstrap’s flex-grow-* class.

.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:

<!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> 