Skip to main content

Cards

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

A succulent in a white ceramic pot against a blue wall

Card default

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

Go somewhere
Sand beach shoreline underneath the blue sky

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.

Standard

$ 39
Single Site
  • Use on one site
  • Use for personal or a client
  • Technical support
Buy Now

Multisite

$ 149
Unlimited Sites
  • Use on unlimited sites
  • Use for personal or a client
  • Technical support
Buy Now
<div class="card text-center mb-4">
<div class="card-header border-bottom 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 mb-4">
<div class="card-header border-bottom 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