Explore Components

Cards

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

Body Content
This is some text within a 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 
<div class="card">
  <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">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>
Header and Footer
Featured
Special title treatment

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

Go somewhere 
<div class="card">
  <h5 class="card-header">Featured</h5>
  <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-success">Go somewhere</a>
  </div>
</div>
Left Align
Special title treatment

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

Go somewhere 
<div class="card">
  <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>
Center Align
Special title treatment

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

Go somewhere 
<div class="card text-center">
  <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>
Right Align
Special title treatment

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

Go somewhere 
<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>
Image Caps
Card image cap
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 mb-3">
  <img class="img-fluid card-img-top" src="assets\images\light-box\l3.jpg" alt="Card image cap">
  <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>
Image Caps [ Bottom ]
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 image cap 
<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-muted">Last updated 3 mins ago</small></p>
  </div>
  <img class="img-fluid card-img-bottom" src="assets\images\light-box\l3.jpg" alt="Card image cap">
</div>
Image Overlays
Card image
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 bg-dark">
  <img class="img-fluid card-img" src="assets\images\light-box\l3.jpg" alt="Card image">
  <div class="card-img-overlay">
    <h5 class="card-title text-white">Card title</h5>
    <p class="card-text text-white">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 text-white">Last updated 3 mins ago</p>
  </div>
</div>
Card Styles
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.

<div class="row">
  <div class="col-sm-4">
    <div class="card text-white bg-primary">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">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>
  </div>
  <div class="col-sm-4">
    <div class="card text-white bg-secondary">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">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>
  </div>
  <div class="col-sm-4">
    <div class="card text-white bg-success">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">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>
  </div>
  <div class="col-sm-4">
    <div class="card text-white bg-danger">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">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>
  </div>
  <div class="col-sm-4">
    <div class="card text-white bg-warning">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">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>
  </div>
  <div class="col-sm-4">
    <div class="card text-white bg-info">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">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>
  </div>
  <div class="col-sm-4">
    <div class="card bg-light">
      <div class="card-header text-muted">Header</div>
      <div class="card-body">
        <h5 class="card-title text-muted">Light card title</h5>
        <p class="card-text text-muted">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-4">
    <div class="card text-white bg-dark">
      <div class="card-header">Header</div>
      <div class="card-body">
        <h5 class="card-title text-white">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>
  </div>
</div>
Card Groups
Card image cap
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 image cap
Card title

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

Last updated 3 mins ago
Card image cap
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">
    <img class="img-fluid card-img-top" src="assets\images\light-box\l3.jpg" alt="Card image cap">
    <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>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="img-fluid card-img-top" src="assets\images\light-box\l3.jpg" alt="Card image cap">
    <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>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
  <div class="card">
    <img class="img-fluid card-img-top" src="assets\images\light-box\l3.jpg" alt="Card image cap">
    <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>
    </div>
    <div class="card-footer">
      <small class="text-muted">Last updated 3 mins ago</small>
    </div>
  </div>
</div>
Horizontal
...
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 overflow-hidden">
  <div class="row g-0">
    <div class="col-md-4">
      <img src="assets\images\light-box\l3.jpg" class="img-fluid rounded-md-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-muted">Last updated 3 mins ago</small></p>
      </div>
    </div>
  </div>
</div>
Buy Now
Settings
  • Theme Mode

    Choose light or dark mode or Auto

  • Theme Contrast

    Choose theme contrast

  • Custom Theme

    Choose your primary theme color

  • Theme layout

    Choose your layout

    img img img img img
  • Sidebar Caption

    Sidebar Caption Hide/Show

  • Theme Layout

    LTR/RTL

  • Layout Width

    Choose Full or Container Layout