Bootstrap 5 Cards

Welcome to The Coding College! In this tutorial, we’ll dive into Bootstrap 5 Cards, one of the most flexible and widely used components in web design. Whether you’re showcasing content, creating a user profile, or building a blog post layout, cards provide a versatile and modern solution.

What Are Cards in Bootstrap 5?

A Card in Bootstrap 5 is a flexible content container that combines images, text, links, buttons, and more into a cohesive layout. It’s lightweight, fully responsive, and highly customizable, making it ideal for modern web applications.

Basic Card Structure

The basic structure of a card involves a container with the .card class. You can include elements like .card-header, .card-body, .card-title, .card-text, .card-footer, and more.

Example: Basic Card

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <p class="card-text">This is a simple card with some example content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Output:

A clean and structured card with a title, text, and button.

Cards with Images

Cards can include images to enhance their visual appeal. Use the .card-img-top or .card-img-bottom classes for images at the top or bottom of the card.

Example: Card with Image

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card Image">
  <div class="card-body">
    <h5 class="card-title">Card with Image</h5>
    <p class="card-text">This card includes an image at the top for a visual touch.</p>
    <a href="#" class="btn btn-primary">Learn More</a>
  </div>
</div>

Card Titles, Text, and Links

You can structure card content using .card-title, .card-subtitle, and .card-text. Add links using <a> tags styled with Bootstrap classes.

Example: Card Content

<div class="card" style="width: 18rem;">
  <div class="card-body">
    <h5 class="card-title">Card Title</h5>
    <h6 class="card-subtitle mb-2 text-muted">Card Subtitle</h6>
    <p class="card-text">Cards can hold titles, subtitles, and descriptive text.</p>
    <a href="#" class="card-link">Card Link</a>
    <a href="#" class="card-link">Another Link</a>
  </div>
</div>

Card Groups

Group multiple cards together using the .card-group class for a uniform look.

Example: Card Group

<div class="card-group">
  <div class="card">
    <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card Image">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">This is the first card in a group.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card Image">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">This is the second card in a group.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card Image">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">This is the third card in a group.</p>
    </div>
  </div>
</div>

Cards with List Groups

Combine cards with list groups for structured content.

Example: Card with List Group

<div class="card" style="width: 18rem;">
  <div class="card-header">Featured</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">Item 1</li>
    <li class="list-group-item">Item 2</li>
    <li class="list-group-item">Item 3</li>
  </ul>
</div>

Horizontal Cards

Create horizontal layouts using the .row and .col classes.

Example: Horizontal Card

<div class="row g-0">
  <div class="col-md-4">
    <img src="https://via.placeholder.com/150" class="img-fluid rounded-start" alt="Card Image">
  </div>
  <div class="col-md-8">
    <div class="card-body">
      <h5 class="card-title">Horizontal Card</h5>
      <p class="card-text">This is a wider card layout for larger screens.</p>
    </div>
  </div>
</div>

Background Colors and Borders

Enhance cards with background colors and borders using contextual classes.

Example: Colored Cards

<div class="card text-white bg-primary mb-3" style="max-width: 18rem;">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Primary Card</h5>
    <p class="card-text">This card has a primary background color.</p>
  </div>
</div>

Card Decks

Use .card-deck for a layout that evenly spaces cards with consistent height.

<div class="card-deck">
  <div class="card">
    <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card Image">
    <div class="card-body">
      <h5 class="card-title">Card 1</h5>
      <p class="card-text">This is the first card in a deck.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card Image">
    <div class="card-body">
      <h5 class="card-title">Card 2</h5>
      <p class="card-text">This is the second card in a deck.</p>
    </div>
  </div>
  <div class="card">
    <img src="https://via.placeholder.com/286x180" class="card-img-top" alt="Card Image">
    <div class="card-body">
      <h5 class="card-title">Card 3</h5>
      <p class="card-text">This is the third card in a deck.</p>
    </div>
  </div>
</div>

Interactive Cards with JavaScript

Bootstrap 5 allows for interactivity with collapsible and expandable cards.

Example: Collapsible Card

<div class="card">
  <div class="card-header">
    <a class="btn btn-link" data-bs-toggle="collapse" href="#collapseCard" role="button" aria-expanded="false">
      Toggle Card
    </a>
  </div>
  <div id="collapseCard" class="collapse">
    <div class="card-body">
      This is the collapsible content inside the card.
    </div>
  </div>
</div>

Accessibility Tips

  • Roles and Aria Attributes: Use aria-expanded and aria-hidden for collapsible cards.
  • Semantic Markup: Always include meaningful content like headings, text, and alternative text for images.

FAQs About Bootstrap 5 Cards

Q1: Can cards be nested?

Yes, you can nest cards inside each other for complex layouts.

Q2: How do I create responsive cards?

Bootstrap cards are responsive by default, but you can enhance their behavior using grid classes like .row and .col-*.

Conclusion

Bootstrap 5 Cards are a versatile component for creating modern, responsive layouts. With customizable styles, interactivity, and flexible layouts, they’re perfect for a variety of use cases, from showcasing products to creating dashboards.

Leave a Comment