Cards

Flexible and extensible content container.

Bootstrap docs

Basic example

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
<!-- Basic card example -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

Alternative 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 + shadow -->
<div class="card border-0 shadow-sm">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Alternative card style: border + shadow -->
<div class="card shadow-sm">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

Hover effect

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
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
<!-- Default card hover effect -->
<div class="card card-hover">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- No border + shadow card hover effect -->
<div class="card border-0 shadow-sm card-hover">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Primary background on hover -->
<div class="card border-0 shadow-sm card-hover card-hover-primary">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Primary shadow on hover -->
<div class="card border-primary card-hover">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

Image top / bottom

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
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 top -->
<div class="card">
  <img src="assets/img/landing/financial/services/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">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-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Image on bottom -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">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-sm btn-primary">Go somewhere</a>
  </div>
  <img src="assets/img/landing/financial/services/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/team/01.jpg); min-height: 12rem;"></div>
    <div class="col-sm-8">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
        <a class="btn btn-sm btn-primary" href="#">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 order-sm-2 bg-repeat-0 bg-size-cover" style="background-image: url(assets/img/team/02.jpg); min-height: 12rem;"></div>
    <div class="col-sm-8 order-sm-1">
      <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
        <a class="btn btn-sm btn-primary" href="#">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">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Center aligned -->
<div class="card text-center">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Right aligned -->
<div class="card text-end">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm">With supporting text below as a natural lead-in to additional content.</p>
    <a href="#" class="btn btn-sm 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">
      <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: Alt tabs

Special title treatment

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

Go somewhere
<!-- Alternative style tabs inside card header -->
<div class="card text-center">
  <div class="card-header">
    <ul class="nav nav-tabs-alt card-header-tabs">
      <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
Card title

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

<!-- Simple list group inside card -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm text-muted">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">Cras justo odio</li>
    <li class="list-group-item">Dapibus ac facilisis in</li>
    <li class="list-group-item">Vestibulum at eros</li>
  </ul>
  <div class="card-body">
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>

<!-- Actionable list group inside card -->
<div class="card">
  <div class="card-body">
    <h5 class="card-title">Card title</h5>
    <p class="card-text fs-sm 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 class="list-group list-group-flush">
    <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>
  <div class="card-body">
    <a href="#" class="btn btn-sm 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.

Header
Gradient 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 text-white bg-primary">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Primary card title</h5>
    <p class="card-text fs-sm">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 bg-secondary">
  <div class="card-header">Header</div>
  <div class="card-body">
    <h5 class="card-title">Secondary card title</h5>
    <p class="card-text fs-sm">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 text-white bg-success">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Success card title</h5>
    <p class="card-text fs-sm">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 text-white bg-danger">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Danger card title</h5>
    <p class="card-text fs-sm">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 text-white bg-warning">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Warning card title</h5>
    <p class="card-text fs-sm">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 text-white bg-info">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Info card title</h5>
    <p class="card-text fs-sm">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 text-white bg-dark">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Dark card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
  </div>
</div>

<!-- Gradient card -->
<div class="card text-white bg-gradient-primary">
  <div class="card-header border-light">Header</div>
  <div class="card-body">
    <h5 class="card-title text-white">Gradient card title</h5>
    <p class="card-text fs-sm">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, 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 bg-faded-primary">
  <div class="card-header border-primary text-primary">Header</div>
  <div class="card-body">
    <h5 class="card-title text-primary">Primary card title</h5>
    <p class="card-text fs-sm text-primary">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

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

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

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

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

<!-- Dark card -->
<div class="card bg-faded-dark border-dark">
  <div class="card-header border-dark text-dark">Header</div>
  <div class="card-body">
    <h5 class="card-title text-dark">Dark card title</h5>
    <p class="card-text fs-sm">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</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 border-primary text-primary">Header</div>
  <div class="card-body">
    <h5 class="card-title text-primary">Primary card title</h5>
    <p class="card-text fs-sm text-primary">Some quick example text to build on the card title and make up the bulk of the card's content within card's body.</p>
  </div>
</div>

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

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

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

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

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

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 card has supporting text below as a natural lead-in to additional content.

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 class="card-img-top" src="assets/img/landing/financial/services/01.jpg" 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>
    </div>
    <div class="card-footer border-top-0 pt-0">
      <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <img class="card-img-top" src="assets/img/landing/financial/services/02.jpg" 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>
    </div>
    <div class="card-footer border-top-0 pt-0">
      <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <img class="card-img-top" src="assets/img/landing/financial/services/03.jpg" 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 card has even longer content than the first to show that equal height action.</p>
    </div>
    <div class="card-footer border-top-0 pt-0">
      <a class="btn btn-sm btn-primary" href="#">Go somewhere</a>
    </div>
  </div>
</div>
Top