Cards

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

Bootstrap documentation


Card title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est nihil cupiditate repellat eaque ipsum vero, saepe non tenetur id ullam earum corrupti dolorum praesentium ut laborum, animi, fugit blanditiis. Eos.

Go somewhere
<div class="card">
  <div class="card-body">
    <h2 class="card-title mb-4">Card title</h5>
    <p class="card-text mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est nihil cupiditate repellat eaque ipsum vero, saepe non tenetur id ullam earum corrupti dolorum praesentium ut laborum, animi, fugit blanditiis. Eos.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>

Images

Card title

Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est nihil cupiditate repellat eaque ipsum vero, saepe non tenetur id ullam earum corrupti dolorum praesentium ut laborum, animi, fugit blanditiis. Eos.

Go somewhere
<div class="card">
  <img class="card-img-top" src="..." alt="Card image cap">
  <div class="card-body">
    <h2 class="card-title mb-4">Card title</h5>
    <p class="card-text mb-6">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Est nihil cupiditate repellat eaque ipsum vero, saepe non tenetur id ullam earum corrupti dolorum praesentium ut laborum, animi, fugit blanditiis. Eos.</p>
    <a class="btn btn-primary" href="#">Go somewhere</a>
  </div>
</div>