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

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.

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.

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.

Output: