BOOTSTRAP BASIC
BOOTSTRAP ADVANCED
BOOTSTRAP EXAMPLES
BOOTSTRAP ARCHIVE
Advertisements

Bootstrap Cards

In this tutorial you will learn how to use Bootstrap card component.

Introducing Bootstrap 4 Cards

Bootstrap 4 introduces a new flexible and extensible content container—the card component—in place of old panels, wells, and thumbnail component. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options.

In the following sections, you will see what you can do with card component.

Creating a Basic Card

The card markup is pretty straight forward. The ourter wrapper require the base class .card, whereas content can be placed inside the .card-body. The following example will show you how to create a card with a picture mixed with some text content and a button.

<div class="card" style="width: 300px;">
    <img src="images/sample.svg" class="card-img-top" alt="...">
    <div class="card-body text-center">
        <h5 class="card-title">Alice Liddel</h5>
        <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
        <a href="#" class="btn btn-primary">View Profile</a>
    </div>
</div>

— The output of the above example will look something like this:


Content Types for Card Component

The card component support a wide variety of content, including images, text, list groups, links, navs, and more. Here are the examples of what's supported by the card.

Body Only Card

You can simply use .card with .card-body within, whenever you need to create a padded box.

<div class="card">
    <div class="card-body">This is some text within a padded box.</div>
</div>

— The output of the above example will look something like this:

Card with Header and Footer

You can also add header and footer within your cards using the .card-header and .card-footer class, respectively. Let's take a look at the following example:

<div class="card text-center">
    <div class="card-header">Featured</div>
    <div class="card-body">
        <h5 class="card-title">NASA launches solar probe</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus, dapibus nec turpis vel, semper malesuada ante.</p>
        <a href="#" class="btn btn-primary">Know more</a>
    </div>
    <div class="card-footer text-muted">2 days ago</div>
</div>

— The output of the above example will look something like this:

Placing List Groups within Card

You can also place list groups inside the card along with other content types, as shown here.

<div class="card" style="width: 18rem;">
    <div class="card-header">Featured</div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Add More</a>
        <a href="#" class="card-link">Share</a>
    </div>
</div>

— The output of the above example will look something like this:

Feel free to mix and match multiple content types to create the card you need. The following example will create a fixed-width card with images, text, list group, and links.

<div class="card" style="width: 300px;">
    <img src="images/avatar.svg" class="w-100 border-bottom" alt="Rounded Image">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Pulvinar leo id risus pellentesque el vestibulum. Sed diam libero egetve sodales sapien vel, aliquet nibhte bibendum enim porttitor orci.</p>
    </div>
    <ul class="list-group list-group-flush">
        <li class="list-group-item">Cras justo odio</li>
        <li class="list-group-item">Dapibus ac facilisis in</li>
        <li class="list-group-item">Vestibulum at eros</li>
    </ul>
    <div class="card-body">
        <a href="#" class="card-link">Card link</a>
        <a href="#" class="card-link">Another link</a>
    </div>
</div>

Customizing the Card Background

There are several options for customizing the card backgrounds, borders, and color. You can use the text and background utility classes to change the appearance of a card.

<div class="row">
    <div class="col-sm-6">
        <div class="card text-white bg-primary mb-4">
            <div class="card-body">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-secondary mb-4">
            <div class="card-body">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-success mb-4">
            <div class="card-body">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-danger mb-4">
            <div class="card-body">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-warning mb-4">
            <div class="card-body">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card text-white bg-info mb-4">
            <div class="card-body">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>    
    <div class="col-sm-6">
        <div class="card text-white bg-dark">
            <div class="card-body">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card bg-light">
            <div class="card-body">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
</div>

— The output of the above example will look something like this:


Customizing the Card Border and Text

You can also customize the text and border color of any card using the text and border utility classes. Just apply these classes on the parent .card or its child elements, as shown below:

<div class="row">
    <div class="col-sm-6">
        <div class="card border-primary mb-4">
            <div class="card-body text-primary">
                <h5 class="card-title">Primary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-secondary mb-4">
            <div class="card-body text-secondary">
                <h5 class="card-title">Secondary card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-success mb-4">
            <div class="card-body text-success">
                <h5 class="card-title">Success card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-danger mb-4">
            <div class="card-body text-danger">
                <h5 class="card-title">Danger card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-warning mb-4">
            <div class="card-body text-warning">
                <h5 class="card-title">Warning card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-info mb-4">
            <div class="card-body text-info">
                <h5 class="card-title">Info card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-dark mb-4">
            <div class="card-body text-dark">
                <h5 class="card-title">Dark card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card border-light mb-4">
            <div class="card-body text-muted">
                <h5 class="card-title">Light card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
            </div>
        </div>
    </div>        
</div>

— The output of the above example will look something like this:


Card Layout Options

In addition to styling of the cards, Bootstrap also includes a few options for laying out the series of cards. However, these layouts are not responsive yet.

Creating Card Groups

You can use card groups to render cards as a single, attached element with equal width and height columns. Card groups use display: flex; to achieve their uniform sizing.

<div class="card-group">
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Vestibulum id metus ac nisl bibendum nibh scelerisque non purus in suspendisse.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Pulvinar leo id risus enim. Bibendum varius tincidunt pellentesque malesuada in.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
</div>

— The output of the above example will look something like this:

Creating Card Decks

Card decks are similar to card groups (i.e. each card has equal width and height). The only difference is cards aren't attached to one another. Here's an example:

<div class="card-group">
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam eu sem tempor.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Vestibulum id metus ac nisl bibendum nibh scelerisque non purus in suspendisse.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
    <div class="card">
        <img src="images/thumbnail.svg" class="card-img-top" alt="...">
        <div class="card-body">
            <h5 class="card-title">Card title</h5>
            <p class="card-text">Pulvinar leo id risus enim. Bibendum varius tincidunt pellentesque malesuada in.</p>
        </div>
        <div class="card-footer">
            <small class="text-muted">Last updated 3 mins ago</small>
        </div>
    </div>
</div>

— The output of the above example will look something like this:

Creating Card Columns

With Bootstrap 4 you can also create grid of cards like Pinterest by wrapping them in .card-columns. Cards are built with CSS column properties instead of flexbox for easier alignment. Cards are ordered from top to bottom and left to right. Let's check out an example:

<div class="card-columns">
<div class="card">
    <img src="images/thumbnail.svg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet, consectetur adipi elit. Nam eu sem tempor, varius quam at, luctus dui. Mauris magna metus.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
</div>
<div class="card p-3">
    <blockquote class="blockquote mb-0 card-body">
        <p>Nam eget purus consectetur in vehicula. Nullamr ultrices nisl risus, viverra libero.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">Someone famous</small>
        </footer>
    </blockquote>
</div>
<div class="card">
    <img src="images/thumbnail.svg" class="card-img-top" alt="...">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Vestibulum id metus ac nisl bibendum scelerisque non dignissim purus.</p>
        <p class="card-text"><small class="text-muted">Last updated 2 mins ago</small></p>
    </div>
</div>
<div class="card bg-primary text-white text-center p-3">
    <blockquote class="blockquote mb-0">
        <p>Pulvinar leo risus vestibulum. Sed diam on sodales eget.</p>
        <footer class="blockquote-footer text-white">
            <small>Someone famous</small>
        </footer>
    </blockquote>
</div>
<div class="card text-center">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Enim arcu, interdum dignissim venenatis velc.</p>
        <p class="card-text"><small class="text-muted">Last updated 1 mins ago</small></p>
    </div>
</div>
<div class="card">
    <img src="images/thumbnail.svg" class="card-img-top" alt="...">
</div>
<div class="card p-3 text-right">
    <blockquote class="blockquote mb-0">
        <p>Quis quam ut magna consequat faucibus. Pellentesque eget nisi suscipit tincidunt. Pellentesque quam.</p>
        <footer class="blockquote-footer">
            <small class="text-muted">Someone famous</small>
        </footer>
    </blockquote>
</div>
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Convallis eget pretium, bibendum non leo. Proien suscipit purus adipiscing dolor gravida fermentum sapien blandit praest interdum vel metus.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>
</div>
</div>

— The output of the above example will look something like this:


Creating Horizontal Cards

You can also create horizontal cards where image and text content are placed side-by-side using a combination of grid and utility classes, as shown in the following example:

<div class="card" style="max-width: 500px;">
    <div class="row no-gutters">
        <div class="col-md-5" style="background: #868e96;">
            <img src="images/sample.svg" class="card-img-top h-100" alt="...">
        </div>
        <div class="col-md-7">
            <div class="card-body">
                <h5 class="card-title">Alice Liddel</h5>
                <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
                <a href="#" class="btn btn-primary stretched-link">View Profile</a>
            </div>
        </div>
    </div>
</div>

— The output of the above example will look something like this:


Card Image Overlays

You can even turn an image into a card background and place the card's text on the top it using the class .card-img-overlay in place of .card-body. Depending on the image, you may need additional styles for better adjustments. Here's an example:

<div class="card text-white" style="width: 350px;">
    <img src="images/sample.svg" class="card-img-top" alt="...">
    <div class="card-img-overlay">
        <h5 class="card-title">Alice Liddel</h5>
        <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
        <a href="#" class="btn btn-primary stretched-link">View Profile</a>
    </div>
</div>

— The output of the above example will look something like this:

Note: The card content should not be larger than the height of the image. If content is larger than the image the content will be displayed outside the image.


Text Alignment inside Card

You can easily change the text alignment of any card—entirely or specific parts—with the text alignment utility classes. Let's check out an example:

<!-- Card with default left text alignment -->
<div class="card">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet tempor...</p>
        <a href="#" class="btn btn-primary">Know more</a>
    </div>
</div>

<!-- Card with center text alignment -->
<div class="card text-center mt-3">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Vestibulum metus bibendum nibh sapien...</p>
        <a href="#" class="btn btn-primary">Know more</a>
    </div>
</div>

<!-- Card with right text alignment -->
<div class="card text-right mt-3">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Pulvinar leo id risus pellentesque diam...</p>
        <a href="#" class="btn btn-primary">Know more</a>
    </div>
</div>

Specifying Card Size

Cards have no specific width, they are 100% wide by default. However, you can change this as needed with custom CSS, grid classes, or sizing utility classes. Let's see how this works:

<!-- Card sizing using grid markup -->
<div class="row">
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Lorem ipsum dolor sit amet...</p>
                <a href="#" class="btn btn-primary">Know more</a>
            </div>
        </div>
    </div>
    <div class="col-sm-6">
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">Card title</h5>
                <p class="card-text">Vestibulum metus bibendum nibh...</p>
                <a href="#" class="btn btn-primary">Know more</a>
            </div>
        </div>
    </div>
</div>

<!-- Card sizing using sizing utility classes -->
<div class="card w-75">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet...</p>
        <a href="#" class="btn btn-primary">Know more</a>
    </div>
</div>

<!-- Card sizing using sizing utility classes -->
<div class="card" style="width: 15rem;">
    <div class="card-body">
        <h5 class="card-title">Card title</h5>
        <p class="card-text">Lorem ipsum dolor sit amet...</p>
        <a href="#" class="btn btn-primary">Know more</a>
    </div>
</div>

Card with Stretched Link

You can add the class .stretched-link to a link inside the card to make the whole card clickable (i.e. whole card act like a link). Multiple links are not recommended with stretched links.

Try out the following example to see how this actually works:

<div class="card" style="width: 300px;">
    <img src="images/sample.svg" class="card-img-top" alt="...">
    <div class="card-body text-center">
        <h5 class="card-title">Alice Liddel</h5>
        <p class="card-text">Alice is a freelance web designer and developer based in London. She is specialized in HTML5, CSS3, JavaScript, Bootstrap, etc.</p>
        <a href="#" class="btn btn-primary stretched-link">View Profile</a>
    </div>
</div>
Advertisements

Your Feedback:

We would love to hear from you, please drop us a line.