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

Bootstrap 4 Card-Deck with Number of Columns Based on Viewport

Creating a card-deck with a responsive number of columns in Bootstrap 4 requires some understanding of the grid system and the new flexbox capabilities introduced in Bootstrap 4.

Using Grid Columns

Instead of relying on the card-deck class, which uses the table-cell display property, we can use the grid col-* classes to specify the desired column widths. This gives us more control over the layout and allows us to create a responsive design.

Enabling Flexbox

In Bootstrap 4, flexbox is enabled by default. However, if you're using an older version or want to manually enable flexbox, add the following CSS rule:

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

Setting Equal Heights

To make the cards equal height, we can take advantage of flexbox's ability to automatically adjust the height of its children to match the tallest child. Simply add the h-100 class to each card, which will make it 100% height and stretch to match the tallest card in the column.

<code class="html"><div class="row">
  <div class="col-6 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-4 h-100">
    <div class="card">...</div>
  </div>
  <div class="col-2 h-100">
    <div class="card">...</div>
  </div>
</div></code>

By combining these techniques, you can create a Bootstrap 4 card-deck that adapts to different viewport sizes, ensuring that the cards remain equal height and are appropriately sized based on the available space.

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