Bootstrap 5 Flex Grow and shrink
Last Updated :
14 Dec, 2022
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=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
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=
rel="stylesheet"
integrity=
"sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<script src=
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
Like Article
Suggest improvement
Share your thoughts in the comments
Please Login to comment...