Bootstrap Components: Cards

35 min

Bootstrap cards are versatile content containers that provide a flexible and extensible way to display content. Cards are perfect for showcasing products, articles, user profiles, or any content that needs structured presentation. The card component includes built-in support for headers, footers, images, and various content sections, making it one of Bootstrap's most useful components.

Cards are built with flexbox, which means they naturally adapt to their content and can be easily arranged in grid layouts. The basic card structure consists of a `.card` container with optional `.card-header`, `.card-body`, and `.card-footer` sections. You can mix and match these sections based on your needs. Cards also support images with `.card-img-top` or `.card-img-bottom` classes, which automatically handle image sizing and positioning.

Bootstrap provides numerous card utilities for different use cases. Card groups allow you to display multiple cards with equal height and width in a single row. Card decks create cards with equal height that aren't attached to each other. Card columns create a masonry-style layout where cards are organized into columns. Understanding these variations helps you choose the right layout for your content.

Cards support various content types including titles, text, links, lists, and even other Bootstrap components like buttons and badges. The `.card-title` and `.card-subtitle` classes provide proper typography hierarchy. The `.card-text` class ensures proper spacing for paragraph content. You can also use Bootstrap's spacing utilities within cards to fine-tune the layout.

Card backgrounds and borders can be customized using Bootstrap's contextual color classes. Classes like `.bg-primary`, `.bg-success`, or `.border-primary` allow you to create visually distinct cards. You can also use `.text-white` or other text color utilities to ensure proper contrast. These styling options make cards suitable for dashboards, portfolios, and feature showcases.

Responsive card layouts are achieved by combining cards with Bootstrap's grid system. Using classes like `row-cols-md-2 row-cols-lg-3` on a row containing cards creates responsive card grids that adapt to screen size. This combination of cards and grid system enables you to build complex, professional layouts with minimal code.

Key Concepts

Cards are flexible content containers for structured content display.
Cards support headers, bodies, footers, and images.
Card groups, decks, and columns provide different layout options.
Cards work seamlessly with Bootstrap's grid system.
Cards support contextual colors and custom styling.

Learning Objectives

Master

Creating cards with various sections and content types
Using card groups, decks, and columns for layouts
Combining cards with grid system for responsive layouts
Styling cards with Bootstrap utilities and contextual classes

Develop

Designing content presentation patterns
Understanding component composition
Creating visually appealing content layouts

Tips

Use card-img-top for images that should appear above card content.
Combine cards with grid system: <div class="row row-cols-md-3"> for responsive card grids.
Use card-header and card-footer for metadata or actions.
Cards automatically handle spacing and borders - no need for custom CSS.

Common Pitfalls

Forgetting to include card-body, causing content to not display properly.
Using fixed widths on cards instead of letting them be responsive.
Not using card groups/decks when displaying multiple cards, causing layout issues.
Overcomplicating card structure when simple cards would suffice.

Summary

Cards provide flexible containers for structured content.
Cards support headers, bodies, footers, and images.
Card layout utilities enable various display patterns.
Cards integrate seamlessly with Bootstrap's grid system.

Exercise

Create a card with header, body, and footer sections, including an image.

<div class="card" style="width: 18rem;">
  <img src="https://via.placeholder.com/300x200" class="card-img-top" alt="Card image">
  <div class="card-header">
    <h5 class="card-title mb-0">Card Title</h5>
  </div>
  <div class="card-body">
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Exercise Tips

Remove the inline style and let cards be responsive within grid columns.
Try card-img-overlay to place text over images: <div class="card-img-overlay">.
Use card-group to create equal-height cards in a row.
Experiment with contextual backgrounds: card bg-primary text-white.

Bootstrap Components: Cards