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.

Go somewhere

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

        
            <div class="card shadow">
                <img class="card-img-top" src="assets/img/cactus.jpg" alt="A succulent in a white ceramic pot against a blue wall">
                <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="btn btn-primary btn-sm rounded-pill">Go somewhere</a>
                </div>
            </div>
            <div class="card card-hover">
                <img class="card-img-top" src="assets/img/beach.jpg" alt="Sand beach shoreline underneath the blue sky">
                <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.</p>
                    <a href="#" class="btn btn-primary btn-sm rounded-pill">Go somewhere</a>
                </div>
            </div>
        
    

Pricing cards

Show prices and options available using pricing cards.

Basic

$0
forever
  • 5 downloads / month
  • Email support
  • No credit card required
  • Easy cancellation
Get started

Add .card-featured to highlight a card price.

        
            <div class="card card-price shadow-lg mb-4">
                <div class="card-header">
                    <h3 class="h4 font-weight-normal">Basic</h3>
                    <div class="d-flex justify-content-center">
                        <span class="h4 font-weight-normal mt-1">$</span>
                        <span class="display-4 font-weight-bold">0</span>
                    </div>
                    <span class="text-muted">forever</span>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled text-secondary mb-4">
                    <li class="py-2">5 downloads / month</li>
                    <li class="py-2">Email support</li>
                    <li class="py-2">No credit card required</li>
                    <li class="py-2">Easy cancellation</li>
                    </ul>
                <a class="btn btn-outline-primary rounded-pill mb-3" href="#">Get started</a>
                </div>
            </div>
            <div class="card card-price card-featured shadow mb-4">
                <div class="card-header">
                    <h3 class="h4 font-weight-normal">Unlimited</h3>
                    <div class="d-flex justify-content-center">
                        <span class="h4 font-weight-normal mt-1">$</span><span class="display-4 font-weight-bold">5</span>
                    </div>
                    <span class="text-muted">per month</span>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled text-secondary mb-4">
                        <li class="py-2">Unlimited downloads</li>
                        <li class="py-2">Online support</li>
                        <li class="py-2">Easy payment</li>
                        <li class="py-2">Easy cancellation</li>
                    </ul>
                    <a class="btn btn-primary rounded-pill mb-3" href="#">Get started</a>
                </div>
            </div>
        
    

Bootstrap Documentation