Loading...

Menu

Content

Components

Utilities

Buy now

Cards: Basic

Flexible and extensible content container.

Bootstrap docs

No image

Card title

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

Go somewhere
<!-- No image -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Alternative card style

Card title

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

Go somewhere

Card title

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

Go somewhere
<!-- Alternative card style: no border + gray background -->
<div class="card border-0 bg-secondary">
  <div class="card-body">
    <h4 class="card-title">Card title</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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Alternative card style: no border -->
<div class="card border-0">
  <div class="card-body">
    <h4 class="card-title">Card title</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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Image on top

Card image

Card title

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

Go somewhere
<!-- Image on top -->
<div class="card">
  <img src="assets/img/blog/grid/01.jpg" class="card-img-top" alt="Card image">
  <div class="card-body">
    <h4 class="card-title">Card title</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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Image on bottom

Card title

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

Go somewhere
Card image
<!-- Image on bottom -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</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>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
  <img src="assets/img/blog/grid/03.jpg" class="card-img-bottom" alt="Card image">
</div>

Horizontal layout

Card title

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

Go somewhere

Card title

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

Go somewhere
<!-- Horizontal card: Image on the left -->
<div class="card overflow-hidden">
  <div class="row g-0">
    <div class="col-sm-4 bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/blog/list/03.jpg); min-height: 14rem;"></div>
    <div class="col-sm-8">
      <div class="card-body">
        <h4 class="card-title">Card title</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>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

<!-- Horizontal card: Image on the right -->
<div class="card overflow-hidden">
  <div class="row g-0">
    <div class="col-sm-4 bg-repeat-0 bg-size-cover order-sm-2" style="background-image: url(assets/img/blog/list/05.jpg); min-height: 14rem;"></div>
    <div class="col-sm-8 order-sm-1">
      <div class="card-body">
        <h4 class="card-title">Card title</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>
        <a href="#" class="btn btn-primary">Go somewhere</a>
      </div>
    </div>
  </div>
</div>

Text alignment

Card title

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

Go somewhere

Card title

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

Go somewhere

Card title

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

Go somewhere
<!-- Left aligned (default) -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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 aligned -->
<div class="card text-center">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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 aligned -->
<div class="card text-end">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <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: Tabs

Special title treatment

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

Go somewhere
<!-- Tabs inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs card-header-tabs" role="tablist">
      <li class="nav-item">
        <a href="#" class="nav-link active" data-bs-toggle="tab" role="tab">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link" data-bs-toggle="tab" role="tab">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled" data-bs-toggle="tab" role="tab">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <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: Pills

Special title treatment

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

Go somewhere
<!-- Pills inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-pills card-header-pills">
      <li class="nav-item">
        <a href="#" class="nav-link active">Active</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">Link</a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link disabled">Disabled</a>
      </li>
    </ul>
  </div>
  <div class="card-body">
    <h4 class="card-title">Special title treatment</h4>
    <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>

List group inside card

Card title

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

  • Cras justo odio
  • Dapibus ac facilisis in
  • Vestibulum at eros
Go somewhere

Card title

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

Go somewhere
<!-- Simple list group inside card -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text text-body-secondary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <ul class="list-group list-group-flush mb-4">
      <li class="list-group-item">Cras justo odio</li>
      <li class="list-group-item">Dapibus ac facilisis in</li>
      <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Actionable list group inside card -->
<div class="card">
  <div class="card-body">
    <h4 class="card-title">Card title</h4>
    <p class="card-text text-body-secondary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
    <div class="list-group list-group-flush mb-4">
      <a href="#" class="list-group-item list-group-item-action">Cras justo odio</a>
      <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
      <a href="#" class="list-group-item list-group-item-action">Vestibulum at eros</a>
    </div>
    <a href="#" class="btn btn-primary">Go somewhere</a>
  </div>
</div>

Card styles: Solid background

Header

Primary card title

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

Header

Secondary card title

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

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Dark card title

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

<!-- Primary card -->
<div class="card border-0 bg-primary">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Primary card title</h4>
    <p class="card-text text-white opacity-70">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Secondary card -->
<div class="card border-0 bg-secondary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h4 class="card-title">Secondary card title</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>

<!-- Success card -->
<div class="card border-0 bg-success">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Success card title</h4>
    <p class="card-text text-white opacity-70">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Danger card -->
<div class="card border-0 bg-danger">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Danger card title</h4>
    <p class="card-text text-white opacity-70">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Warning card -->
<div class="card border-0 bg-warning">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Warning card title</h4>
    <p class="card-text text-white opacity-70">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Info card -->
<div class="card border-0 bg-info">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Info card title</h4>
    <p class="card-text text-white opacity-70">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Dark card -->
<div class="card bg-dark">
  <div class="card-header text-white border-light">Header</div>
  <div class="card-body">
    <h4 class="card-title text-white">Dark card title</h4>
    <p class="card-text text-white opacity-70">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Card styles: Faded 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 within card's body.

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Dark card title

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

<!-- Primary card -->
<div class="card border-0 bg-primary bg-opacity-10">
  <div class="card-header text-primary border-primary">Header</div>
  <div class="card-body">
    <h4 class="card-title text-primary">Primary card title</h4>
    <p class="card-text text-primary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Success card -->
<div class="card border-0 bg-success bg-opacity-10">
  <div class="card-header text-success border-success">Header</div>
  <div class="card-body">
    <h4 class="card-title text-success">Success card title</h4>
    <p class="card-text text-success">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Danger card -->
<div class="card border-0 bg-danger bg-opacity-10">
  <div class="card-header text-danger border-danger">Header</div>
  <div class="card-body">
    <h4 class="card-title text-danger">Danger card title</h4>
    <p class="card-text text-danger">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Warning card -->
<div class="card border-0 bg-warning bg-opacity-10">
  <div class="card-header text-warning border-warning">Header</div>
  <div class="card-body">
    <h4 class="card-title text-warning">Warning card title</h4>
    <p class="card-text text-warning">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Info card -->
<div class="card border-0 bg-info bg-opacity-10">
  <div class="card-header text-info border-info">Header</div>
  <div class="card-body">
    <h4 class="card-title text-info">Info card title</h4>
    <p class="card-text text-info">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Dark card -->
<div class="card bg-dark bg-opacity-10">
  <div class="card-header text-dark border-dark">Header</div>
  <div class="card-body">
    <h4 class="card-title text-dark">Dark card title</h4>
    <p class="card-text text-dark">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Card styles: Border 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 within card's body.

Header

Success card title

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

Header

Danger card title

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

Header

Warning card title

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

Header

Info card title

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

Header

Dark card title

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

<!-- Primary card -->
<div class="card border-primary">
  <div class="card-header text-primary border-primary">Header</div>
  <div class="card-body">
    <h4 class="card-title text-primary">Primary card title</h4>
    <p class="card-text text-primary">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Success card -->
<div class="card border-success">
  <div class="card-header text-success border-success">Header</div>
  <div class="card-body">
    <h4 class="card-title text-success">Success card title</h4>
    <p class="card-text text-success">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Danger card -->
<div class="card border-danger">
  <div class="card-header text-danger border-danger">Header</div>
  <div class="card-body">
    <h4 class="card-title text-danger">Danger card title</h4>
    <p class="card-text text-danger">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Warning card -->
<div class="card border-warning">
  <div class="card-header text-warning border-warning">Header</div>
  <div class="card-body">
    <h4 class="card-title text-warning">Warning card title</h4>
    <p class="card-text text-warning">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Info card -->
<div class="card border-info">
  <div class="card-header text-info border-info">Header</div>
  <div class="card-body">
    <h4 class="card-title text-info">Info card title</h4>
    <p class="card-text text-info">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Dark card -->
<div class="card border-dark">
  <div class="card-header text-dark border-dark">Header</div>
  <div class="card-body">
    <h4 class="card-title text-dark">Dark card title</h4>
    <p class="card-text text-dark">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

Layout: Card group

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.

Card image

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.

<!-- Card group -->
<div class="card-group">

  <!-- Card -->
  <div class="card">
    <img src="assets/img/blog/grid/01.jpg" class="card-img-top" alt="Card image">
    <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>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <img src="assets/img/blog/grid/03.jpg" class="card-img-top" alt="Card image">
    <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 card has even longer content than the first to show that equal height action.</p>
      <a href="#" class="btn btn-primary">Go somewhere</a>
    </div>
  </div>
</div>

Layout: Masonry grid

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
Card title

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

Last updated 3 mins ago
Card image
Card title

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

Last updated 3 mins ago
Card image
Card title

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

Last updated 3 mins ago

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

Last updated 3 mins ago

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

Last updated 3 mins ago
<!-- Masonry grid: 3 columns -->
<div class="masonry-grid" data-columns="3">

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img src="assets/img/blog/grid/01.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">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>
        <span class="text-body-secondary fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card border-danger">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <span class="text-body-secondary fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img src="assets/img/blog/grid/02.jpg" class="card-img-top" alt="Card image">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">This card has supporting text below as a natural lead-in to additional content.</p>
        <span class="text-body-secondary fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img src="assets/img/blog/grid/03.jpg" class="card-img" alt="Card image">
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <span class="text-body-secondary fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card border border-primary text-center">
      <div class="card-body">
        <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <span class="text-body-secondary fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card border-0 bg-secondary">
      <div class="card-body">
        <p class="card-text fs-sm">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        <span class="text-body-secondary fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>
</div>