Cards: Basic

<!-- 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: 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 -->
<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 -->
<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 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>

<!-- Header and footer -->
<div class="card text-center">
  <div class="card-header">Featured</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 class="card-footer fs-sm text-body-secondary">3 days ago</div>
</div>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>

<!-- 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>