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.

Standard

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

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">Standard</h3>
                        <div class="d-flex justify-content-center">
                            <span class="h4 font-weight-normal mt-1">$</span>
                            <span class="h1">49</span>
                        </div>
                        <span class="text-muted">Single Site</span>
                    </div>
                    <div class="card-body">
                        <ul class="list-unstyled mb-4">
                            <li class="py-2 text-secondary">Use on one site</li>
                            <li class="py-2 text-secondary">Use for personal or a client</li>
                            <li class="py-2 text-secondary">Technical support</li>
                        </ul>
                        <a class="btn btn-outline-primary rounded-pill mb-3" href="#">Buy Now</a>
                    </div>
            </div>
            <div class="card card-price card-featured shadow-lg mb-4">
                <div class="card-header">
                    <h3 class="h4 font-weight-normal">Multisite</h3>
                    <div class="d-flex justify-content-center">
                        <span class="h4 font-weight-normal mt-1">$</span>
                        <span class="h1">149</span>
                    </div>
                    <span class="text-muted">Unlimited Sites</span>
                </div>
                <div class="card-body">
                    <ul class="list-unstyled mb-4">
                        <li class="py-2 text-secondary">Use on unlimited sites</li>
                        <li class="py-2 text-secondary">Use for personal or a client</li>
                        <li class="py-2 text-secondary">Technical support</li>
                    </ul>
                    <a class="btn btn-primary rounded-pill mb-3" href="#">Buy Now</a>
                </div>
            </div>
        
    

Bootstrap Documentation