Bootstrap 5 Tutorial

v5.3.0

Bootstrap 5 Tutorial

Cards in Bootstrap 5

Cards: Flexible and extensible content container with multiple variants and options.

Basic Card

Cards are built with as little markup and styles as possible, but still manage to deliver a ton of control and customization.

Card title

Card subtitle

Some quick example text to build on the card title and make up the bulk of the card's content.

Card link Another link

<!-- Basic Card -->
<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">Card content goes here...</p>
    <a href="#" class="card-link">Card link</a>
    <a href="#" class="card-link">Another link</a>
  </div>
</div>

Card with Image

Card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Go somewhere

<!-- Card with Image -->
<div class="card" style="width: 18rem;">
  <Image width={400} height={300} src="image.jpg" class="card-img-top" alt="...">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Card content...</p>
    <a href="#" class="btn btn-primary">Button</a>
  </div>
</div>

Card Header and Footer

Featured

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

2 days ago

<!-- Card with Header and Footer -->
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title</h5>
    <p class="card-text">Card content...</p>
  </div>
  <div class="card-footer text-muted">
    2 days ago
  </div>
</div>

Card Layouts

Horizontal Card

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card with Image Overlay

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card Colors

Header

Primary card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Success card title

Some quick example text to build on the card title and make up the bulk of the card's content.

Header

Danger card title

Some quick example text to build on the card title and make up the bulk of the card's content.

<!-- Colored Cards -->
<div class="card text-bg-primary">
  <div class="card-body">
    <h5 class="card-title">Primary card</h5>
    <p class="card-text">Card content...</p>
  </div>
</div>

<div class="card text-bg-success">
  <div class="card-body">
    <h5 class="card-title">Success card</h5>
    <p class="card-text">Card content...</p>
  </div>
</div>

<div class="card text-bg-warning">
  <div class="card-body">
    <h5 class="card-title">Warning card</h5>
    <p class="card-text">Card content...</p>
  </div>
</div>

Card Groups

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card title

This is a wider card with supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Grid Cards

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

Card title

This is a longer card with supporting text below as a natural lead-in to additional content.

<!-- Grid Cards -->
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <Image width={400} height={300} src="..." class="card-img-top" alt="...">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Card content...</p>
      </div>
    </div>
  </div>
  <!-- More cards... -->
</div>

Card with List Group

Featured

An item
A second item
A third item

Card footer

Card Navigation

Special title treatment

With supporting text below as a natural lead-in to additional content.

Go somewhere

Card with Badges

Product Name

New

Some quick example text to build on the card title.

$99.99Add to Cart

Card Sizing

Small Card

With supporting text below as a natural lead-in.

Default Card

With supporting text below as a natural lead-in to additional content.

Full Height Card

This card uses .h-100 to take full height of its container.

Card with Dropdown

Card Header

Card with Dropdown Menu

This card includes a dropdown menu in the header for additional options.

Card with Progress Bar

Project Progress

Completion status of the current project.

Design75%

Development40%

Testing20%

Card with Accordion

FAQ Section

This card contains an accordion inside it for showing expandable content.

Yes, you can customize all aspects of this card using Bootstrap classes.

Accessibility

Accessibility Best Practices

Use semantic HTML structure with proper heading hierarchy
Ensure sufficient color contrast for text and backgrounds
Make interactive elements keyboard accessible
Provide alternative text for images
Use ARIA attributes when appropriate
Test with screen readers

Best Practices

Do's

✅ Use cards for related content grouping
✅ Maintain consistent card heights in grids
✅ Use appropriate heading hierarchy
✅ Add hover effects for interactive cards
✅ Make clickable cards accessible
✅ Use responsive image classes

Don'ts

❌ Don't overcrowd cards with too much content
❌ Avoid inconsistent card designs
❌ Don't use cards for simple text blocks
❌ Avoid too many nested elements
❌ Don't forget mobile responsiveness
❌ Don't neglect accessibility

NextIntroduction

→

Bootstrap 5 Tutorial

Bootstrap Basics

Layout System

Typography

Colors & Backgrounds

Images & Media

Tables

Forms

Buttons

Components

Utilities

Advanced Topics

Real-World Projects

Bootstrap 5 Tutorial