Card Groups and Decks in Bootstrap

Bootstrap provides additional layout options for organizing cards into groups and decks. These features allow you to manage the spacing, alignment, and arrangement of cards in a grid-like structure.

1. Card Groups

Card Groups are used to group multiple cards together in a row with equal height. This ensures that the cards in a group are aligned and have the same height, creating a uniform appearance.

Class: .card-group

Usage:

Wrap the card elements inside a container with the .card-group class. This will align the cards in a horizontal row and equalize their heights.

Example:

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Some quick example text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Some quick example text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Some quick example text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

• .card-group: Aligns cards horizontally and equalizes their height. Cards within a group will have the same height, regardless of their content.

2. Card Decks

Card Decks are used to display cards in a row with equal width and space between them. Unlike card groups, card decks do not equalize the height of the cards but ensure that the cards are spaced evenly.

Class: .card-deck

Usage:

Wrap the card elements inside a container with the .card-deck class. This will create a deck of cards with equal spacing.

Example:

<div class="card-deck">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Some quick example text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Some quick example text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Some quick example text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

• .card-deck: Displays cards in a horizontal row with equal spacing between them. The width of the cards will adjust to fit the available space, and cards will not have equal heights.

3. Card Columns

Card Columns are another layout option that arranges cards in a grid-like layout where each column can have a different height. This layout is useful for creating responsive and varied card arrangements.

Class: .card-columns

Usage:

Wrap the card elements inside a container with the .card-columns class. This will create a masonry-like grid where cards flow into the next column.

Example:

<div class="card-columns">
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">Some quick example text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">Some quick example text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/150" class="card-img-top" alt="Card image cap">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">Some quick example text.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <!-- More cards -->
</div>

• .card-columns: Creates a masonry-style grid layout where cards are arranged in columns. Each card can have a different height, and cards will wrap to the next column as needed.

Summary of Card Layouts in Bootstrap

• Card Groups: Use .card-group to align cards horizontally with equal heights.
• Card Decks: Use .card-deck to display cards in a row with equal spacing, without equalizing heights.
• Card Columns: Use .card-columns for a masonry-style grid layout where cards flow into columns with varying heights.