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

Bootstrap 4 Card-Deck with Variable Card Widths

Problem:

Bootstrap 4's card-deck feature aligns cards side-by-side, but all cards have the same width regardless of viewport size. This can result in suboptimal presentation on narrower screens.

Solution:

To create a responsive card-deck with varying card widths based on viewport size, you can implement the following steps:

1. Eliminate the Use of Card-Deck:

The card-deck class uses a table-cell layout, which limits flexibility. Instead, use the grid column classes (e.g., col-sm-4, col-lg-2) to define card widths.

2. Enable Flexbox:

Bootstrap 4 Alpha 6 and later versions use flexbox by default. However, if you're using an earlier version, you may need to manually enable it with the following CSS:

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

3. Set Card Heights:

To ensure all cards have the same height, add the h-100 class to each card:

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

4. Responsive Breakpoints:

Use the col-- classes to define different card widths for specific viewport sizes (i.e., screen widths):

<div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
  ...
</div>

Example Code:

<div class="row">
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
  <div class="card h-100 col-xs-6 col-sm-4 col-md-3 col-lg-2 col-xl-1">
    ...
  </div>
</div>

This solution allows you to create a responsive card-deck that resizes based on viewport size, ensuring your layout adapts to different screens.

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