Home >Web Front-end >CSS Tutorial >How to Make a Bootstrap 4 Row Expand to Fill Remaining Height?
How to Make a Bootstrap 4 Row Expand to Fill Remaining Height?
- Patricia ArquetteOriginal
- 2024-11-17 05:23:03535browse
Bootstrap 4 - Expanding Row to Fill Remaining Height
In this article, we will explore how to expand a row to fill the remaining height using Bootstrap 4.
Problem:
You may encounter a situation where you want a row to stretch to occupy the rest of the available height. Despite attempts to use the h-100 class, excessive whitespace appears at the bottom of the screen.
Solution: Bootstrap 4.1 flex-grow-1 Class
Bootstrap 4.1 introduces the flex-grow-1 class, which allows an element to expand to fill the remaining space within its parent container. By utilizing this class, we can achieve our desired result.
Here's the revised code snippet:
<br>html,body{height:100%;}</p>
<p>.bg-purple {<br> background: rgb(48,0,50);<br>}<br>.bg-gray {<br> background: rgb(74,74,74);<br>}<br>.bg-blue {<br> background: rgb(50,101,196);<br>}<br>.bg-red {<br> background: rgb(196,50,53);<br>} </p>
<p><div> <div class="row justify-content-center h-100"></p>
<pre class="brush:php;toolbar:false"><div>Explanation:
- Flexbox Container: We added the d-flex and flex-column classes to the red column to enable flexbox functionality.
- Fixed Row: We set a fixed height for the purple row (ROW 1) to prevent it from expanding.
- Flex-grow: We applied the flex-grow-1 class to the blue row (ROW 2), allowing it to grow and fill the remaining height.
With these adjustments, the blue row will now occupy the rest of the available space within the red column. This method ensures that the entire page height is utilized efficiently without any additional whitespace at the bottom.
The above is the detailed content of How to Make a Bootstrap 4 Row Expand to Fill Remaining Height?. For more information, please follow other related articles on the PHP Chinese website!