Bootstrap 5 Flex Grow and shrink

Bootstrap 5 Flex Grow and shrink is used to apply the expanding and shrinking look to an HTML div in a flexbox. By default, all the flex items will have the width/size until specified.

When we add the .flex-grow-1 to a flex item it expands and covers up all the space which is available to it. Adding the .flex-grow-0 will keep the width of the flex-item as default. When we add the .flex-shrink-1 to a flex item to shrink whenever it is necessary and when the other items take up all the space that is available. Adding the .flex-shink-0 will stop the flex-item from shrinking.

Bootstrap 5 Flex Grow and shrink Classes:

flex-grow-*: This class is required to be added to any flex item in a flexbox and the flex item will have the grow function when that * is replaced by 1 and they will stay as default when the * will be replaced by 0.
flex-shrink-*: This class is required to be added to any flex item in a flexbox and the flex item will have the shrink function when that * is replaced by 1 and they will stay as default when the * will be replaced by 0.

Syntax:

<div class="d-flex">
      <div class="flex-grow-*">
          ....
      </div>
</div>
<div class="d-flex">
      <div class="flex-shrink-*">
          ....
      </div>
</div>

Example 1: The code below demonstrates how we can use the flex-grow feature in the flexbox and how we can specify the screen size where it will start growing.

HTML

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

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
          crossorigin="anonymous">
    </script>
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h4>Bootstrap 5 Flex Grow and shrink</h4>
    <pre class="mt-4">
        1st item having Flex Grow
    </pre>
    <div class="d-flex">
        <div class="p-2 flex-grow-1 
                    bg-secondary border border-info">
            1st Item
        </div>
        <div class="p-2 bg-secondary 
                    border border-info">
            2nd Item
        </div>
        <div class="p-2 bg-secondary 
                     w-25 border border-info">
            Third Item
        </div>
    </div>
    <pre class="mt-4">
        Responsive Flex Grow
    </pre>
    <div class="d-flex mt-4">
        <div class="p-2 bg-success 
                    border border-danger">
            Flex item
        </div>
        <div class="p-2 flex-lg-grow-1 
                    bg-success border 
                    border-danger">
            Flex item
        </div>
        <div class="p-2 flex-lg-grow-1 
                    bg-success border 
                    border-danger">
            Flex item
        </div>
        <div class="p-2 bg-success 
                    border border-danger">
            Flex item
        </div>
    </div>
</body>

</html>

Output:

Example 2: The code below demonstrates how we can use the flex shrink feature in the flexbox and how we can specify the screen size where it will start shrinking.

HTML

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

<head>
    <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" 
          rel="stylesheet"
          integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" 
          crossorigin="anonymous">
    <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" 
          integrity=
"sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" 
          crossorigin="anonymous">
    </script>
</head>

<body class="m-2">
    <h1 class="text-success">GeeksforGeeks</h1>
    <h4>Bootstrap 5 Flex Grow and shrink</h4>
    <pre class="mt-4">
        1st item having Flex Shrink
    </pre>
    <div class="d-flex">
        <div class="p-2 flex-shrink-1 
                    bg-secondary border border-info">
             1st Item
        </div>
        <div class="p-2 bg-secondary w-100 
                    border border-info">
            2nd Item
        </div>
        <div class="p-2 bg-secondary 
                    w-50 border border-info">
            Third Item
        </div>
    </div>
    <pre class="mt-4">
        Responsive Flex Shrink
    </pre>
    <div class="d-flex mt-4">
        <div class="p-2 w-25 bg-success border 
                    border-danger">
            Flex item
        </div>
        <div class="p-2 w-25 flex-md-shrink-0 
                    bg-success border border-danger">
            Flex item
        </div>
        <div class="p-2 w-25 flex-md-shrink-0 
                    bg-success border border-danger">
            Flex item
        </div>
        <div class="p-2 w-100 bg-success 
                    border border-danger">
            Flex item
        </div>
    </div>  
</body>

</html>

Output:

Reference: https://getbootstrap.com/docs/5.0/utilities/flex/#grow-and-shrink

Bootstrap 5 Flex Grow and shrink

Explore