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

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>
Output:
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
Bootstrap-4
Bootstrap-Misc
HTML-Misc
Picked
Bootstrap
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to Show Images on Click using HTML ?
How to set Bootstrap Timepicker using datetimepicker library ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
How to insert spaces/tabs in text using HTML/CSS?
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to update Node.js and NPM to next version ?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property