How to Create a Responsive Card-Deck with Bootstrap 4?

Bootstrap 4 Card-Deck with Responsive Column Count

In Bootstrap 4, the card-deck feature allows you to create cards of equal height. However, the default layout displays four cards per row regardless of the viewport width. This may not be desirable in all situations, where you may prefer a responsive layout that adjusts the number of columns based on the available viewport space.

To achieve this, one approach is to use the flexbox display property, specifying a flex value that forces a wrap to a new line after a certain number of columns. This can be implemented using the col-- grid classes:

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

By adding this CSS, each column within the row will behave like a flexbox item, allowing them to wrap and adjust their widths dynamically based on the available viewport space.

However, in Bootstrap 4 Alpha 6 and later, flexbox is enabled by default for these columns. Therefore, no additional CSS is necessary to achieve the desired responsive behavior. Instead, you can simply use the h-100 class to set all cards to full height.

Example:

<code class="html"><div class="card-deck-wrapper">
  <div class="row">
    <div class="h-100 col-sm-6 col-md-4 col-lg-3 col-xl-2">
      <div class="card">
        ...
      </div>
    </div>
    ...
  </div>
</div></code>

This solution provides a responsive card-deck that adjusts the number of columns based on the viewport width, ensuring that the cards remain aligned and of equal height.

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