How to Make Bootstrap 4 Cards the Same Height in Columns?

Bootstrap 4: Cards of the Same Height in Columns

Problem:

Using Bootstrap 4, cards within columns vary in height based on title text length. How can you achieve same-height cards, even when the height of their content differs?

Answer:

Contrary to the concern, Bootstrap 4 columns already utilize flexbox, which ensures they are inherently of the same height. To make the cards occupy the entire height of their respective columns, simply add the h-100 class to the cards, as seen in the following code snippet:

<code class="html"><div class="col-md-4 col-sm-6 col-12">
  <div class="card h-100">
    ...
  </div>
</div></code>

Additional Considerations:

• Avoid floating the cards, as it's unnecessary.
• Remove the .card-deck class from the .row; .col-* should be direct children of .row.

Demonstration:

Visit https://codeply.com/go/hKhPuxoovH for a live demonstration of the solution.

The above is the detailed content of How to Make Bootstrap 4 Cards the Same Height in Columns?. For more information, please follow other related articles on the PHP Chinese website!