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!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn