Cards

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">
    <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 image
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

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
<!-- Alternative card style: no border + shadow -->
<div class="card border-0 shadow">
  <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: no border + shadow
.card.border-0.shadow
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

Hover effect

Hover over me!

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
Hover over me!

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
<!-- Hover effect on default card -->
<div class="card card-hover">
  <div class="card-body">
    <h5 class="card-title">Hover over me!</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 on alt style card -->
<div class="card border-0 shadow card-hover">
  <div class="card-body">
    <h5 class="card-title">Hover over me!</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 on default card
.card.card-hover
  .card-body
    h5.card-title
      | Hover over me!
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

// Hover effect on alt style card
.card.border-0.shadow.card-hover
  .card-body
    h5.card-title
      | Hover over me!
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

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="pat-to-image" 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 top
.card
  img(src="path-to-image", alt="Card image").card-img-top
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

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">
    <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="pat-to-image" class="card-img-bottom" alt="Card image">
</div>
// Image on bottom
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere
  img(src="path-to-image", alt="Card image").card-img-bottom

Horizontal layout

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.

Go somewhere
<!-- Horizontal card layout -->
<div class="card card-horizontal">
  <div class="card-img-top" style="background-image: url(pat-to-image);"></div>
  <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>
    <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
  </div>
</div>
// Horizontal card layout
.card.card-horizontal
  .card-img-top(style="background-image: url(path-to-image);")
  .card-body
    h5.card-title
      | Card title
    p.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.
    a(href="#").btn.btn-sm.btn-primary
      | Go somewhere

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>
// Left aligned (default)
.card
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

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

// Right aligned
.card.text-end
  .card-body
    h5.card-title
      | Card title
    p.card-text.fs-sm
      | With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

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-sm btn-primary">Go somewhere</a>
  </div>
</div>
// Tabs inside card header
.card.text-center
  .card-header
    ul.nav.nav-tabs.card-header-tabs
      li.nav-item
        a.nav-link.active(href="#", data-bs-toggle="tab", role="tab") Active
      li.nav-item
        a.nav-link(href="#", data-bs-toggle="tab", role="tab") Link
      li.nav-item
        a.nav-link.disabled(href="#", data-bs-toggle="tab", role="tab") Disabled
  .card-body
    h4.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

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-sm btn-primary">Go somewhere</a>
  </div>
</div>
// Pills inside card header
.card.text-center
  .card-header
    ul.nav.nav-pills.card-header-pills
      li.nav-item
        a.nav-link.active(href="#") Active
      li.nav-item
        a.nav-link(href="#") Link
      li.nav-item
        a.nav-link.disabled(href="#") Disabled
  .card-body
    h4.card-title Special title treatment
    p.card-text With supporting text below as a natural lead-in to additional content.
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

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">
    <h4 class="card-title">Card title</h4>
    <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">
    <h4 class="card-title">Card title</h4>
    <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>
// Simple list group inside card
.card
  .card-body
    h4.card-title
      | Card title
    p.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.
  ul.list-group.list-group-flush
    li.list-group-item Cras justo odio
    li.list-group-item Dapibus ac facilisis in
    li.list-group-item Dapibus ac facilisis in
  .card-body
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

// Actionable list group inside card
.card
  .card-body
    h4.card-title
      | Card title
    p.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.
  .list-group.list-group-flush
    a(href="#").list-group-item.list-group-item-action
      | Cras justo odio
    a(href="#").list-group-item.list-group-item-action
      | Dapibus ac facilisis in
    a(href="#").list-group-item.list-group-item-action
      | Dapibus ac facilisis in
  .card-body
    a.btn.btn-sm.btn-primary(href="#") Go somewhere

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

// Secondary card
.card.bg-secondary
  .card-header Header
  .card-body
    h5.card-title
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Success card
.card.text-white.bg-success
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Danger card
.card.text-white.bg-danger
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Warning card
.card.text-white.bg-warning
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Info card
.card.text-white.bg-info
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Dark card
.card.text-white.bg-dark
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Dark card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Gradient card
.card.text-white.bg-gradient
  .card-header Header
  .card-body
    h5.card-title.text-white
      | Gradient card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

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.

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
Dark card title

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

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

// Secondary card
.card
  .card-header
    | Header
  .card-body
    h5.card-title
      | Secondary card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Success card
.card.text-success.border-success
  .card-header.border-success
    | Header
  .card-body
    h5.card-title.text-success
      | Success card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Danger card
.card.text-danger.border-danger
  .card-header.border-danger
    | Header
  .card-body
    h5.card-title.text-danger
      | Danger card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Warning card
.card.text-warning.border-warning
  .card-header.border-warning
    | Header
  .card-body
    h5.card-title.text-warning
      | Warning card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Info card
.card.text-info.border-info
  .card-header.border-info
    | Header
  .card-body
    h5.card-title.text-info
      | Info card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

// Dark card
.card.text-dark.border-dark
  .card-header.border-dark
    | Header
  .card-body
    h5.card-title
      | Dark card title
    p.card-text.fs-sm
      | Some quick example text to build on the card title and make up the bulk of the card's content.

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.

Go somewhere
Card image
Card title

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

Go somewhere
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.

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

  <!-- Card -->
  <div class="card">
    <img src="pat-to-image" 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>
      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
  </div>

  <!-- Card -->
  <div class="card">
    <img src="pat-to-image" 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>
      <a href="#" class="btn btn-sm btn-primary">Go somewhere</a>
    </div>
  </div>

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

  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.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.
      a.btn.btn-sm.btn-primary(href="#") Go somewhere
  
  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.card-text.fs-sm
        | This card has supporting text below as a natural lead-in to additional content.
      a.btn.btn-sm.btn-primary(href="#") Go somewhere
  
  // Card
  .card
    img(src="path-to-image", alt="Card image").card-img-top
    .card-body
      h5.card-title
        | Card title
      p.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.
      a.btn.btn-sm.btn-primary(href="#") Go somewhere

Layout: Card 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

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 class="card-img-top" src="path-to-image" 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-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </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-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img class="card-img-top" src="path-to-image" 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-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card">
      <img class="card-img" src="path-to-image" alt="Card image">
    </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-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>

  <!-- Item -->
  <div class="masonry-grid-item">
    <div class="card border border-danger">
      <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-muted fs-xs">Last updated 3 mins ago</span>
      </div>
    </div>
  </div>
</div>
// Masonry grid: 3 columns
.masonry-grid(data-columns="3")

  // Item
  .masonry-grid-item
    .card
      img(src="path-to-image", alt="Card image").card-img-top
      .card-body
        h5.card-title Card title
        p.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.
        span.text-muted.fs-xs Last updated 3 mins ago
  
  // Item
  .masonry-grid-item
    .card
      .card-body
        h5.card-title Card title
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago
  
  // Item
  .masonry-grid-item
    .card
      img(src="path-to-image", alt="Card image").card-img-top
      .card-body
        h5.card-title Card title
        p.card-text.fs-sm This card has supporting text below as a natural lead-in to additional content.
        span.text-muted.fs-xs Last updated 3 mins ago
  
  // Item
  .masonry-grid-item
    .card
      img(src="path-to-image", alt="Card image").card-img
  
  // Item
  .masonry-grid-item
    .card.border.border-primary.text-center
      .card-body
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago
  
  // Item
  .masonry-grid-item
    .card.border.border-danger
      .card-body
        p.card-text.fs-sm Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
        span.text-muted.fs-xs Last updated 3 mins ago
Top