Cards

A card is a flexible and extensible content container.

Card default

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

Go somewhere

Card rising

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

Go somewhere

Add .card-hover to animate a card on hover.

<div class="card">
  <img class="card-img-top" src="assets/img/cactus.jpg" alt="">
  <div class="card-body">
    <h2 class="h4 card-title">Card default</h2>
    <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="link-cta">Go somewhere</a>
  </div>
</div>

<div class="card card-hover">
  <img class="card-img-top" src="assets/img/beach.jpg" alt="">
  <div class="card-body">
    <h2 class="h4 card-title">Card rising</h2>
    <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content. lorem</p>
    <a href="#" class="link-cta">Go somewhere</a>
  </div>
</div>

Pricing cards

Show prices and options available using pricing cards.

<div class="card text-center">
  <div class="card-header py-4">
    <h3 class="h4 fw-normal">Standard</h3>
    <div class="d-flex justify-content-center">
      <span class="fs-4 mt-1">$</span>
      <span class="h1">39</span>
    </div>
    <span class="text-secondary">Single Site</span>
  </div>
  <div class="card-body">
    <ul class="list-unstyled fw-light">
      <li class="py-2">Use on one site</li>
      <li class="py-2">Use for personal or a client</li>
      <li class="py-2">Technical support</li>
    </ul>
    <a class="btn btn-outline-primary rounded-pill mb-3" href="#">Buy Now</a>
  </div>
</div>

<div class="card border border-4 border-primary text-center">
  <div class="card-header py-4">
    <h3 class="h4 fw-normal">Multisite</h3>
    <div class="d-flex justify-content-center">
      <span class="fs-4 mt-1">$</span>
      <span class="h1">149</span>
    </div>
    <span class="text-secondary">Unlimited Sites</span>
  </div>
  <div class="card-body">
    <ul class="list-unstyled fw-light">
      <li class="py-2">Use on unlimited sites</li>
      <li class="py-2">Use for personal or a client</li>
      <li class="py-2">Technical support</li>
    </ul>
    <a class="btn btn-primary rounded-pill mb-3" href="#">Buy Now</a>
  </div>
</div>

Bootstrap Documentation