Card page header description goes here...

Basic Usage

Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options. Please read the official Bootstrap documentation for the full list of options.

Card header here
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
Card with list group
  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Card link Another link 
<!-- basic usage -->
<div class="card">
  <div class="card-header">Card header here</div>
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <h6 class="card-subtitle mb-3 text-muted">Card subtitle</h6>
    <p class="card-text mb-3">...</p>
    <div>
      <a href="#" class="card-link">Card link</a>
      <a href="#" class="card-link">Another link</a>
    </div>
  </div>
</div>

<!-- card with list-group -->
<div class="card">
  <ul class="list-group list-group-flush">
    <li class="list-group-item">...</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
</div>

Fullscreen (extended feature)

This is an extended feature from Bootstrap card. Add an attribute data-toggle="card-expand" to any link or button to trigger the maximize or minimize the card element

Card header here Expand
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 
<div class="card">
  <div class="card-header d-flex">
    <span class="flex-grow-1">...</span>
    <a href="#" data-toggle="card-expand" class="text-muted text-decoration-none"><i class="fa fa-fw fa-expand"></i> Expand</a>
  </div>
</div>

Sizing

Cards assume no specific width to start, so they’ll be 100% wide unless otherwise stated. You can change this as needed with custom CSS, grid classes, grid Sass mixins, or utilities.

Special title treatment

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

Go somewhere 
<!-- using grid -->
<div class="row">
  <div class="col-sm-8">
    <div class="card">...</div>
  </div>
</div>

<!-- using utilities -->
<div class="card w-25">...</div>
<div class="card w-50">...</div>
<div class="card w-75">...</div>

<!-- using custom css -->
<div class="card" style="width: 18rem;">...</div>

Images

Cards include a few options for working with images. Choose from appending “image caps” at either end of a card, overlaying images with card content, or simply embedding the image in a card.

IMAGE CAPS
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
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 caps -->
<div class="card mb-3">
  <img src="https://via.placeholder.com/600x400/c9d2e3/212837" alt="" class="card-img-top" />
  <div class="card-body">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

<!-- image overlay -->
<div class="card bg-dark text-white mb-3 border-0">
  <img src="https://via.placeholder.com/600x735/212837/c9d2e3" alt="" class="card-img" />
  <div class="card-img-overlay">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

Horizontal

Using a combination of grid and utility classes, cards can be made horizontal in a mobile-friendly and responsive way.

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

<div class="card">
  <div class="row gx-0">
    <div class="col-md-4">
      <img src="https://via.placeholder.com/600x600/c9d2e3/212837" alt="" class="card-img rounded-0" />
    </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-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>

Card Styles

Cards include various options for customizing their backgrounds, borders, and color.

BACKGROUND AND 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.

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.

<!-- background and color -->
<div class="card text-white bg-primary mb-3">
  <div class="card-header">...</div>
  <div class="card-body">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

<!-- border -->
<div class="card border-primary mb-3">
  <div class="card-header border-primary bg-transparent text-primary">...</div>
  <div class="card-body text-primary">
    <h5 class="card-title">...</h5>
    <p class="card-text">...</p>
  </div>
</div>

Card groups

Use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

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 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. This card has even longer content than the first to show that equal height action.

Last updated 3 mins ago

<div class="card-group">
  <div class="card">...</div>
  <div class="card">...</div>
  <div class="card">...</div>
</div>

Grid cards

Use the Bootstrap grid system and its .row-cols classes to control how many grid columns (wrapped around your cards) you show per row. For example, here’s .row-cols-1 laying out the cards on one column, and .row-cols-md-2 splitting four cards to equal width across multiple rows, from the medium breakpoint up.

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 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. This card has even longer content than the first to show that equal height action.

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

<div class="row row-cols-1 row-cols-md-2 g-3">
  <div class="col">
    <div class="card h-100">...</div>
  </div>
  <div class="col">
    <div class="card h-100">...</div>
  </div>
  ...
</div>

Card columns

In v5, cards can be organized into Masonry-like columns with masonry javascript included.

Card title that wraps to a new line

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

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

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

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat.

Someone famous in Source Title
Card title

This card has a regular title and short paragraphy of text below it.

Last updated 3 mins ago

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.

Someone famous in Source Title
Card title

This is another card with title and supporting text below. This card has some additional content to make it slightly taller overall.

Last updated 3 mins ago

<!-- javsacript -->
<script src="assets/plugins/masonry-layout/dist/masonry.pkgd.min.js"></script>

<!-- html -->
<div class="row" data-masonry='{"percentPosition": true }'>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card">...</div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card">...</div>
  </div>
  <div class="col-sm-6 col-lg-4 mb-4">
    <div class="card">...</div>
  </div>
</div>
Dark Mode NEW
Adjust the appearance to reduce glare and give your eyes a break.