How to Achieve Equal Card Height in a Bootstrap 4 Card-Deck with Responsive Column Count?

Bootstrap 4 Card-Deck with Responsive Column Count

Scenario:

Implementing Bootstrap 4's card-deck feature to ensure equal card height across different viewport sizes.

Issue:

By default, card-deck displays four cards on a row regardless of viewport size, leading to undesired content resizing on smaller screens.

Solution 1: Grid Columns (Bootstrap 4 Alpha 2)

Prior to Bootstrap 4 flexbox support, a workaround involved using

elements with appropriate grid column classes (e.g., col-*) to control card width. Flexbox was then applied to force equal height:

<code class="css">.row > div[class*='col-'] {
  display: flex;
  flex: 1 0 auto;
}</code>

Solution 2: h-100 Class (Bootstrap 4 Alpha 6 and Above)

With flexbox becoming default in Bootstrap 4 Alpha 6, an even simpler solution emerged:

<code class="css">.h-100 {
  height: 100%;
}</code>

Apply the h-100 class to card elements to automatically set their height to 100%, making them equal in height:

<code class="html"><div class="card h-100">
  ...
</div></code>

Note:

For more responsive layouts, consider using breakpoint classes such as d-*-col (e.g., d-md-col-6) to specify column counts at specific screen sizes.

The above is the detailed content of How to Achieve Equal Card Height in a Bootstrap 4 Card-Deck with Responsive Column Count?. For more information, please follow other related articles on the PHP Chinese website!