Home > Article > Web Front-end > How to Achieve Equal Heights for Cards in Bootstrap 4 Columns?
Equaling the Heights of Bootstrap 4 Cards in Columns
As mentioned, the Bootstrap 4 framework already implements flexbox on columns, which ensures they are initially of the same height. To achieve equal card heights within these columns, consider using the h-100 class on the cards. This class sets the height to 100%, enabling the cards to fully occupy the available space within each column.
Here's an example of how to implement this using h-100:
<code class="html"><div class="container"> <div class="row"> <div class="col-md-4 col-sm-6 col-12"> <div class="card h-100"> ... </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="card h-100"> ... </div> </div> <div class="col-md-4 col-sm-6 col-12"> <div class="card h-100"> ... </div> </div> </div> </div></code>
This modification ensures that the cards within each column will be of equal height, regardless of their content. It's important to note that the .card-deck class, which previously contained the cards, is no longer necessary.
The above is the detailed content of How to Achieve Equal Heights for Cards in Bootstrap 4 Columns?. For more information, please follow other related articles on the PHP Chinese website!