Cards

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options.

Example

img
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-->
<div class="card">
  <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top " alt="img">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <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>

Card body

This is some text within a card body.
 <!--Card body-->
<div class="card">
  <div class="card-body">
    This is some text within a card body.
  </div>
</div>

Titles, text, and links

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 
<!--Text-->
  <div class="card">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <h6 class="card-subtitle mb-2 text-body-secondary">Card subtitle</h6>
      <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="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>

Images

img

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

 <!--Image-->
  <div class="card">
    <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top " alt="img">
    <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>
    </div>
  </div>

List group

  • An item
  • A second item
  • A third item
 <!--List-->
  <div class="card">
    <ul class="list-group list-group-flush">
      <li class="list-group-item">An item</li>
      <li class="list-group-item">A second item</li>
      <li class="list-group-item">A third item</li>
    </ul>
  </div>

List header

Featured
  • An item
  • A second item
  • A third item
<!-- List header-->
<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>
  <li class="list-group-item">A third item</li>
</ul>
</div>

List Footer

Kitchen sink

img
Card title

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

  • An item
  • A second item
  • A third item
Card link Another link 
 <!--Kitchen sink-->
  <div class="card">
    <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top " alt="img">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <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>
    </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>
      <li class="list-group-item">A third item</li>
    </ul>
    <div class="card-body">
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>

Header

Featured
Special title treatment

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

Go somewhere 
<!--Card header-->
<div class="card">
  <div class="card-header">
    Featured
  </div>
  <div class="card-body">
    <h5 class="card-title">Special title treatment</h5>
    <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Footer

Text alignment

Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere
Special title treatment

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

Go somewhere 
<!--Text alignment left-->
  <div class="card mb-3">
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <!--Text alignment center-->
  <div class="card text-center mb-3">
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
  <!--Text alignment right-->
  <div class="card text-end">
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

Navigation

Special title treatment

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

Go somewhere 
<!--Navigation-->
  <div class="card text-center">
    <div class="card-header">
      <ul class="nav nav-tabs card-header-tabs">
        <li class="nav-item">
          <a class="nav-link active" aria-current="true" href="#">Active</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Link</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled">Disabled</a>
        </li>
      </ul>
    </div>
    <div class="card-body">
      <h5 class="card-title">Special title treatment</h5>
      <p class="card-text">With supporting text below as a natural lead-in to additional content.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

Image caps

img
Card title

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

Last updated 3 mins ago

Card title

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

Last updated 3 mins ago

img 
                        
  <!--Image caps-->
  <div class="card mb-3">
  <img src="../../assets/images/blog/blog-img-1.jpg" class="  w-100 card-img-top"
    alt="img">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
      additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
  </div>
</div>
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
      additional content. This content is a little bit longer.</p>
    <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
  </div>
  <img src="../../assets/images/blog/blog-img-1.jpg" class="  w-100card-img-bottom"
    alt="img">
</div>

Image overlays

img
Card title

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

Last updated 3 mins ago

<!--Image overlay-->
<div class="card text-bg-dark">
  <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img" alt="img">
  <div class="card-img-overlay">
    <h5 class="card-title">Card title</h5>
    <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
      additional content. This content is a little bit longer.</p>
    <p class="card-text"><small>Last updated 3 mins ago</small></p>
  </div>
</div>

Horizontal

img
Card title

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

Last updated 3 mins ago

<!--horizontal-->
    <div class="card mb-3" >
      <div class="row g-0">
        <div class="col-md-4">
          <img src="../../assets/images/blog/testimonial-img-1.jpg" class=" rounded-start" alt="...">
        </div>
        <div class="col-md-8">
          <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
          </div>
        </div>
      </div>
    </div>

Backgorund color

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
Secondary 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.

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

<!--Primary background-->
  <div class="card text-bg-primary mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Primary card title</h5>
      <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>
    </div>
  </div>
  <!--Secondary background-->
  <div class="card text-bg-secondary mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Secondary card title</h5>
      <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>
    </div>
  </div>
  <!--Success background-->
  <div class="card text-bg-success mb-3" >
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Success card title</h5>
      <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>
    </div>
  </div>
  <!--Danger background-->
  <div class="card text-bg-danger mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Danger card title</h5>
      <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>
    </div>
  </div>
  <!--Warning background-->
  <div class="card text-bg-warning mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Warning card title</h5>
      <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>
    </div>
  </div>
  <!--Info background-->
  <div class="card text-bg-info mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Info card title</h5>
      <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>
    </div>
  </div>
  <!--Light background-->
  <div class="card text-bg-light mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Light card title</h5>
      <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>
    </div>
  </div>
  <!--Dark background-->
  <div class="card text-bg-dark mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Dark card title</h5>
      <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>
    </div>
  </div>

Border

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
Secondary 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.

Header
Warning card title

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

Header
Info card title

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

Header
Light card title

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

Header
Dark card title

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

<!--Border primary-->
  <div class="card border-primary mb-3">
    <div class="card-header">Header</div>
    <div class="card-body text-primary">
      <h5 class="card-title">Primary card title</h5>
      <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>
    </div>
  </div>
  <!--Border secondary-->
  <div class="card border-secondary mb-3">
    <div class="card-header">Header</div>
    <div class="card-body text-secondary">
      <h5 class="card-title">Secondary card title</h5>
      <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>
    </div>
  </div>
  <!--Border success-->
  <div class="card border-success mb-3">
    <div class="card-header">Header</div>
    <div class="card-body text-success">
      <h5 class="card-title">Success card title</h5>
      <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>
    </div>
  </div>
  <!--Border danger-->
  <div class="card border-danger mb-3">
    <div class="card-header">Header</div>
    <div class="card-body text-danger">
      <h5 class="card-title">Danger card title</h5>
      <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>
    </div>
  </div>
  <!--Border warning-->
  <div class="card border-warning mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Warning card title</h5>
      <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>
    </div>
  </div>
  <!--Border info-->
  <div class="card border-info mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Info card title</h5>
      <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>
    </div>
  </div>
  <!--Border light-->
  <div class="card border-light mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Light card title</h5>
      <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>
    </div>
  </div>
  <!--Border dark-->
  <div class="card border-dark mb-3">
    <div class="card-header">Header</div>
    <div class="card-body">
      <h5 class="card-title">Dark card title</h5>
      <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>
    </div>
  </div>

Card groups

img
Card title

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

Last updated 3 mins ago

img
Card title

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

Last updated 3 mins ago

img
Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

  <!--Card group-->
<div class="card-group">
  <div class="card">
    <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
        additional content. This content is a little bit longer.</p>
      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This card has supporting text below as a natural lead-in to additional
        content.</p>
      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
  <div class="card">
    <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
    <div class="card-body">
      <h5 class="card-title">Card title</h5>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in to
        additional content. This card has even longer content than the first to show that equal
        height action.</p>
      <p class="card-text"><small class="text-body-secondary">Last updated 3 mins ago</small></p>
    </div>
  </div>
</div>

Grid card

img
Card title

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

img
Card title

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

img
Card title

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

img
Card title

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

<!--Grid card-->
<div class="row row-cols-1 row-cols-md-2 g-4">
  <div class="col">
    <div class="card">
      <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in
          to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in
          to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in
          to additional content.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card">
      <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in
          to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
</div>

When you need equal height, add .h-100 to the cards. If you want equal heights by default, you can set $card-height: 100% in Sass.

Card height

img
Card title

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

img
Card title

This is a short card.

img
Card title

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

<!--card height-->
<div class="row row-cols-1 row-cols-md-3 g-4">
  <div class="col">
    <div class="card h-100">
      <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in
          to additional content. This content is a little bit longer.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a short card.</p>
      </div>
    </div>
  </div>
  <div class="col">
    <div class="card h-100">
      <img src="../../assets/images/blog/blog-img-1.jpg" class="card-img-top" alt="img">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">This is a longer card with supporting text below as a natural lead-in
          to additional content.</p>
      </div>
    </div>
  </div>
</div>

Just like with card groups, card footers will automatically line up.

Card footer