Cards

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

Cards on Bootstrap

Basic Example

<div class="card" style="width:20rem;"><img class="card-img-top" src="../../assets/img/crane.png" alt="...">
  <div class="card-body">
    <h5 class="card-title">Title goes here</h5>
    <p class="card-text">Here is the example of the Multiple Container Sortable feature of the </p><button class="btn btn-primary">Go somewhere</button>
  </div>
</div>
...
Title goes here

Here is the example of the Multiple Container Sortable feature of the

Card with list

<div class="card" style="width:20rem;"> <a class="dropdown-item fw-bold text-warning" href="#!"><span class="fas fa-crown me-1"></span><span>Go Pro</span></a>
  <div class="dropdown-divider"></div><a class="dropdown-item" href="#!">Set status</a><a class="dropdown-item" href="../../pages/user/profile.html">Profile & account</a><a class="dropdown-item" href="#!">Feedback</a>
  <div class="dropdown-divider"></div><a class="dropdown-item" href="../../pages/user/settings.html">Settings</a><a class="dropdown-item" href="../../pages/authentication/card/logout.html">Logout</a>
</div>
Go Pro
Set statusProfile & accountFeedback
SettingsLogout

Image overlays

<div class="card text-white overflow-hidden" style="width:30rem;"> <img class="card-img-top" src="../../assets/img/4.jpg" alt="...">
  <div class="card-img-overlay d-flex align-items-end">
    <div>
      <h4 class="card-title text-white">Card title</h4>
      <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>
    </div>
  </div>
</div>
...

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.

Horizontal

<div class="card" style="width:32rem;">
  <div class="row g-0">
    <div class="col-md-4"> <img class="img-fluid rounded-start" src="../../assets/img/1.jpg" alt="..."></div>
    <div class="col-md-8">
      <div class="card-body">
        <h4 class="card-title">Card Title</h4>
        <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 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 Groups

<div class="card-group">
  <div class="card"> <img class="card-img-top" src="../../assets/img/4.jpg" alt="...">
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <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 45 mins ago</small></p>
    </div>
  </div>
  <div class="card"> <img class="card-img-top" src="../../assets/img/2.jpg" alt="...">
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <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 45 mins ago</small></p>
    </div>
  </div>
  <div class="card"> <img class="card-img-top" src="../../assets/img/3.jpg" alt="...">
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <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 45 mins ago</small></p>
    </div>
  </div>
  <div class="card"> <img class="card-img-top" src="../../assets/img/4.jpg" alt="...">
    <div class="card-body">
      <h4 class="card-title">First card title</h4>
      <p class="card-text">This is a wider card with supporting text below as a natural lead-in 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 45 mins ago</small></p>
    </div>
  </div>
</div>
...

First 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 45 mins ago

...

First 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 45 mins ago

...

First 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 45 mins ago

...

First card title

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

Last updated 45 mins ago

Card Background Styles

<div class="row g-4">
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card text-white bg-primary">
      <div class="card-body">
        <h4 class="card-title text-white">Primary Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card text-white bg-secondary">
      <div class="card-body">
        <h4 class="card-title text-white">Secondary Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card text-white bg-success">
      <div class="card-body">
        <h4 class="card-title text-white">Success Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card text-white bg-danger">
      <div class="card-body">
        <h4 class="card-title text-white">Danger Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card text-white bg-warning">
      <div class="card-body">
        <h4 class="card-title text-white">Warning Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card text-white bg-info">
      <div class="card-body">
        <h4 class="card-title text-white">Info Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card text-dark bg-light">
      <div class="card-body">
        <h4 class="card-title text-dark">Light Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card text-white bg-dark">
      <div class="card-body">
        <h4 class="card-title text-white">Dark Card </h4>
        <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>
  </div>
</div>

Primary Card

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

Secondary Card

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

Success Card

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

Danger Card

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

Warning Card

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

Info Card

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

Light Card

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

Dark Card

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

Card Border Styles

<div class="row g-4">
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card border border-primary">
      <div class="card-body">
        <h4 class="card-title">Primary Border Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card border border-secondary">
      <div class="card-body">
        <h4 class="card-title">Secondary Border Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card border border-success">
      <div class="card-body">
        <h4 class="card-title">Success Border Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card border border-danger">
      <div class="card-body">
        <h4 class="card-title">Danger Border Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card border border-warning">
      <div class="card-body">
        <h4 class="card-title">Warning Border Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card border border-info">
      <div class="card-body">
        <h4 class="card-title">Info Border Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card border border-light">
      <div class="card-body">
        <h4 class="card-title">Light Border Card </h4>
        <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>
  </div>
  <div class="col-sm-6 col-md-4 col-lg-3">
    <div class="card border border-dark">
      <div class="card-body">
        <h4 class="card-title">Dark Border Card </h4>
        <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>
  </div>
</div>

Primary Border Card

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

Secondary Border Card

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

Success Border Card

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

Danger Border Card

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

Warning Border Card

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

Info Border Card

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

Light Border Card

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

Dark Border Card

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

On this page