Bootstrap Cards

A card is a flexible box with a border, which can have an image, a header, a body and a footer. It is used for products, blog posts, profiles and dashboard boxes.

A basic card

<div class="card" style="width: 18rem;">
  <img src="images/photo.jpg" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">Some short text which explains the card.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Parts of a card

Class	Use
.card	The wrapper
.card-body	The padded content area
.card-title, .card-subtitle, .card-text	Title, subtitle and text
.card-img-top, .card-img-bottom	Image at the top or bottom
.card-header, .card-footer	Header and footer
.card-link	Links in the body

Header, footer and list

<div class="card">
  <div class="card-header">Featured</div>
  <ul class="list-group list-group-flush">
    <li class="list-group-item">An item</li>
    <li class="list-group-item">A second item</li>
  </ul>
  <div class="card-footer text-body-secondary">2 days ago</div>
</div>

Cards in a responsive grid

Use the grid classes row-cols-* and gutters around the cards. Add h-100 to each card to make all cards in a row the same height.

<div class="row row-cols-1 row-cols-md-3 g-3">
  <div class="col">
    <div class="card h-100"><div class="card-body"><h5 class="card-title">Card 1</h5><p class="card-text">A short text.</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">This card has a longer text so it is taller than the other cards in the same row.</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">Another card.</p></div></div>
  </div>
</div>

Card colors and borders

<div class="card text-bg-primary mb-2" 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">Text on a colored card.</p></div>
</div>
<div class="card border-success" style="max-width: 18rem;">
  <div class="card-body text-success"><h5 class="card-title">Success border</h5></div>
</div>

Horizontal card

<div class="card mb-3" style="max-width: 540px;">
  <div class="row g-0">
    <div class="col-4">
      <img src="images/photo.jpg" class="img-fluid rounded-start h-100 object-fit-cover" alt="Card image">
    </div>
    <div class="col-8">
      <div class="card-body">
        <h5 class="card-title">Horizontal card</h5>
        <p class="card-text">An image on the left, and the text on the right.</p>
      </div>
    </div>
  </div>
</div>

Stretched link

Add .stretched-link to a link inside a card, and the whole card becomes clickable.

• Previous Page
• Next Page

---

Exercises & Assignments
No Content Found.

Interview Questions & Answers
No Content Found.