Bootstrap 5 Flex Grow and shrink
Last Updated : 02 Aug, 2024
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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity= "sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"> <script src= "https://cdn.jsdelivr.net/npm/[email protected]/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