Bootstrap 5 Cards: Creating Clean and Attractive Content Display Units

In web design, we often need to present information in an organized and aesthetically pleasing manner, such as product lists, article previews, user profiles, etc. Bootstrap 5’s Card component is precisely designed to meet such needs—it acts as an “information box” that neatly organizes scattered content (images, text, buttons, etc.) while supporting responsive layouts, ensuring the page displays perfectly on different devices.

I. Basic Structure of the Card Component¶

The core of a card is created using the .card class, which serves as a container for titles, text, images, buttons, and other content. Here’s the basic structure:

<div class="card" style="width: 18rem;"> <!-- Outer card container -->
  <img src="..." class="card-img-top" alt="Card image"> <!-- Image at the top -->
  <div class="card-body"> <!-- Core content area of the card -->
    <h5 class="card-title">Card Title</h5> <!-- Title -->
    <p class="card-text">This is a descriptive text inside the card...</p> <!-- Body text -->
    <a href="#" class="btn btn-primary">View Details</a> <!-- Button -->
  </div>
</div>

.card: The “shell” of the card, wrapping all content.
.card-img-top: Displays the image at the top of the card (use .card-img-bottom for the bottom or .card-img-overlay to overlay text).
.card-body: The core content container for titles, text, buttons, etc.
.card-title: Card title (large, bold font).
.card-text: Card body text (automatically adjusts line height to avoid clutter).

II. Core Components and Usage¶

Cards support a variety of component combinations to enrich content. Here are common components and their usage:

1. Image and Text Combination¶

Images can be placed at the top using .card-img-top or overlaid with text using .card-img-overlay (requires absolute positioning):

<!-- Image at the top -->
<div class="card" style="width: 20rem;">
  <img src="product.jpg" class="card-img-top" alt="Product image">
  <div class="card-body">
    <h5 class="card-title">Wireless Headphones</h5>
    <p class="card-text">10-hour battery life, waterproof design, fast charging support...</p>
    <span class="badge bg-success">Hot Sale</span> <!-- Badge -->
  </div>
</div>

<!-- Text overlaid on image -->
<div class="card" style="width: 20rem; height: 250px;">
  <img src="bg.jpg" class="card-img-top" alt="Background image">
  <div class="card-img-overlay d-flex flex-column justify-content-end">
    <h5 class="card-title text-white">Travel Photo Album</h5>
    <p class="card-text text-white-75">Capture beautiful moments</p>
  </div>
</div>

2. List and Divider¶

For lists (e.g., product specifications, article tags), use the .list-group class with .list-group-flush to remove default borders:

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Product Specifications</h5>
    <ul class="list-group list-group-flush">
      <li class="list-group-item">Size: 15.6 inches</li>
      <li class="list-group-item">Resolution: 4K</li>
      <li class="list-group-item">Weight: 1.2kg</li>
    </ul>
  </div>
</div>

3. Buttons and Action Area¶

Add a footer (.card-footer) or buttons directly to guide user interactions:

<div class="card" style="width: 18rem;">
  <img src="avatar.jpg" class="card-img-top" alt="User avatar">
  <div class="card-body">
    <h5 class="card-title">User Information</h5>
    <p class="card-text">Name: Zhang San | Position: Frontend Developer</p>
  </div>
  <div class="card-footer bg-transparent">
    <a href="#" class="btn btn-outline-primary me-2">Follow</a>
    <a href="#" class="btn btn-outline-secondary">Message</a>
  </div>
</div>

III. Card Styling and Layout¶

Use utility classes to quickly adjust appearance and arrangement:

1. Controlling Card Size¶

Customize width with width or max-width, or use Bootstrap size classes (e.g., .card-sm, .card-lg; note: Bootstrap 5 uses these, but combine with col-* for responsive control):

<div class="card col-md-4 mb-3"> <!-- Occupy 4 columns on medium screens, with bottom margin -->
  <div class="card-body text-center">
    <h5 class="card-title">Small Card</h5>
    <p class="card-text">Short content, suitable for mobile display</p>
  </div>
</div>

2. Alignment and Shadow¶

Shadow: Control with .shadow-sm (light), .shadow (default), or .shadow-lg (deep).
Centering: Use .text-center for text alignment or .d-flex justify-content-center for overall content centering.

<div class="card shadow mb-4" style="max-width: 300px;">
  <div class="card-body text-center">
    <h5 class="card-title">Centered Card</h5>
    <p class="card-text">This is centered text content...</p>
  </div>
</div>

3. Responsive Card Arrangement¶

Use .row + .col-* for responsive multi-card layouts (1 column on small screens, multiple columns on medium screens):

<div class="row row-cols-1 row-cols-md-3 g-4"> <!-- 1 column (sm), 3 columns (md), gap-4 -->
  <div class="col">
    <div class="card h-100"> <!-- Full height of parent container -->
      <div class="card-body">
        <h5 class="card-title">Card 1</h5>
        <p class="card-text">Content 1</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Card 2</h5>
        <p class="card-text">Content 2</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <div class="card-body">
        <h5 class="card-title">Card 3</h5>
        <p class="card-text">Content 3</p>
      </div>
    </div>
  </div>
</div>

IV. Comprehensive Example: Product Display Card¶

Here’s a complete card example with image, title, price, specs, and a button:

<div class="card" style="max-width: 250px;">
  <img src="phone.jpg" class="card-img-top" alt="Smartphone">
  <div class="card-body">
    <h5 class="card-title">XPhone 14</h5>
    <p class="card-subtitle mb-2 text-muted">2023 Flagship Model</p>
    <p class="card-text h4 text-primary fw-bold">¥4999</p> <!-- Highlight price -->
    <p class="card-text small text-muted">6.7-inch Full Screen · 128GB Storage</p>
  </div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Chipset: Snapdragon 8 Gen2</li>
    <li class="list-group-item">Camera: 5000MP</li>
    <li class="list-group-item">Battery: 4500mAh</li>
  </ul>
  <div class="card-footer bg-transparent">
    <a href="#" class="btn btn-primary w-100">Buy Now</a>
  </div>
</div>

V. Notes¶

Image Handling: Always add the alt attribute (descriptive text) for accessibility; use img-fluid to make images fit the card width.
Avoid Conflicts: Do not override Bootstrap utility classes unnecessarily (e.g., avoid setting border-radius on .card unless necessary).
Layout Nesting: Nest lists/button groups inside cards, but use spacing utilities (e.g., .mb-2, .mt-3) to prevent clutter.

By mastering the above, you can leverage the flexibility of Bootstrap 5 cards for scenarios ranging from simple information display to complex content combinations. Next, explore custom styling or JavaScript integration (e.g., click-to-expand details) to enhance user experience further.