Bootstrap Cards

In bootstrap, the card is a flexible content container box to hold a wide variety of other bootstrap components. The bootstrap card has included the options for headers, footers, background colors, content, etc. for better display.

 

The card component has been introduced in bootstrap 4 and it replaces the old panels, wells and thumbnails components in bootstrap 3.

Bootstrap Create Card

In bootstrap, you can create a card by adding .card class to <div> element and wrap the card content inside of <div> element with .card-body class like as shown below.

 

Live Preview

<div class="card">

    <div class="card-body">Basic card example</div>

</div>

The above example will return the result like as shown below.

 

Bootstrap basic card example result

Bootstrap Card with Titles, Text and Links

By adding .card-title or .card-subtitle class to any heading (<h*>) element, you can create card title and subtitle in bootstrap card. To remove the bottom margin for the text, you can add .card-text class to the required elements.

 

Same way, you can add the links to bootstrap card by adding .card-link to <a> element. The .card-link will place the links next to each other.

 

Live Preview

<div class="card">

    <div class="card-body">

        <h5 class="card-title">Card Title</h5>

        <h6 class="card-subtitle text-muted">Card subtitle</h6>

        <p class="card-text">Welcome to Tutlane. Its card sample text.</p>

        <a href="#" class="card-link">Link1</a>

        <a href="#" class="card-link">Link2</a>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap cards with titles, links and text example result

Bootstrap Card with Headers and Footers

By using .card-header and .card-footer classes, you can create the header and footer for the card in bootstrap.

 

Live Preview

<div class="card">

    <div class="card-header">Card Header</div>

    <div class="card-body">

        <h5 class="card-title">Card Title</h5>

        <p class="card-text">Welcome to Tutlane. Its card sample text.</p>

        <a href="#" class="btn btn-primary">View Profile</a>

    </div>

    <div class="card-footer text-muted">1 day ago</div>

</div>

The above example will return the result like a shown below.

 

Bootstrap card with headers and footers example result

Bootstrap Customize Card Style

In bootstrap, by using text and background contextual classes (.bg-primary, .bg-secondary, .bg-success, etc.) we can customize the style of cards based on our requirements.

 

Live Preview

<div class="row">

    <div class="col-sm-4">

        <div class="card text-white bg-primary mb-4">

            <div class="card-body">

                <h5 class="card-title">Suresh Dasari</h5>

                <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

            </div>

        </div>

    </div>

    <div class="col-sm-4">

        <div class="card text-white bg-secondary mb-4">

            <div class="card-body">

                <h5 class="card-title">Suresh Dasari</h5>

                <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

            </div>

        </div>

    </div>

    <div class="col-sm-4">

        <div class="card text-white bg-info mb-4">

            <div class="card-body">

                <h5 class="card-title">Suresh Dasari</h5>

                <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

            </div>

        </div>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap customize card style example result

 

Same way, we can customize the border color of cards using border utility classes such as .border-primary, .border-secondary, etc. based on our requirements.

 

Live Preview

<div class="row">

    <div class="col-sm-4">

        <div class="card text-primary border-primary mb-4">

            <div class="card-body">

                <h5 class="card-title">Suresh Dasari</h5>

                <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

            </div>

        </div>

    </div>

    <div class="col-sm-4">

        <div class="card text-secondary border-secondary mb-4">

            <div class="card-body">

                <h5 class="card-title">Suresh Dasari</h5>

                <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

            </div>

        </div>

    </div>

    <div class="col-sm-4">

        <div class="card text-success border-success mb-4">

            <div class="card-body">

                <h5 class="card-title">Suresh Dasari</h5>

                <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

            </div>

        </div>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap customize card border style example result

Bootstrap Card with Images

In bootstrap, you can add the images at the top or bottom of card by adding .card-img-top or .card-img-bottom to <img> element. The .card-img-top class will place the image at the top of card and .card-img-bottom class will place image at the bottom of card in bootstrap.

 

Live Preview

<!--Image at the top-->

<div class="card" style="width: 14rem;">

    <img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">

    <div class="card-body text-center">

        <h5 class="card-title">Suresh Dasari</h5>

        <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        <a href="#" class="btn btn-primary">View Profile</a>

    </div>

</div>

<!--Image at the bottom-->

<div class="card" style="width: 14rem;">

    <div class="card-body text-center">

        <h5 class="card-title">Suresh Dasari</h5>

        <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        <a href="#" class="btn btn-primary">View Profile</a>

    </div>

    <img class="card-img-bottom" src="/images/defaultimg.png" alt="Suresh Dasari Card">

</div>

If you observe the above example, we added the image outside of .card-body to span the entire width of card. The above example will return the result like as shown below.

 

Bootstrap cards with images example result

Bootstrap Card Image Overlays

By replacing .card-body class with .card-img-overlay, you can turn the image into a card background and overlay your card text.

 

Live Preview

<div class="card text-muted" style="width: 20rem;">

    <img class="card-img" src="/images/defaultimg.png" alt="Suresh Dasari Card">

    <div class="card-img-overlay">

        <h5 class="card-title">Suresh Dasari</h5>

        <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        <a href="#" class="btn btn-primary">View Profile</a>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap card image overlays example result

Bootstrap Horizontal Cards

In bootstrap, we can create the responsive and mobile friendly horizontal card by placing the image and card content side by side using grid and utility classes.

 

Live Preview

<div class="card" style="width: 500px;">

    <div class="row no-gutters">

        <div class="col-sm-5">

            <img class="card-img" src="/images/defaultimg.png" alt="Suresh Dasari Card">

        </div>

        <div class="col-sm-7">

            <div class="card-body">

                <h5 class="card-title">Suresh Dasari</h5>

                <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

                <a href="#" class="btn btn-primary">View Profile</a>

            </div>

        </div>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap horizontal card example result

Bootstrap Card Groups

In bootstrap, the .card-group class is useful to arrange a series of cards as single, attached element with equal width and height columns.

 

Live Preview

<div class="card-group">

    <div class="card">

        <img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

        <div class="card-footer">

            <small class="text-muted">3 mins ago</small>

        </div>

    </div>

    <div class="card">

        <img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

        <div class="card-footer">

            <small class="text-muted">3 mins ago</small>

        </div>

    </div>

    <div class="card">

        <img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

        <div class="card-footer">

            <small class="text-muted">3 mins ago</small>

        </div>

    </div>

</div>

If you observe the above example, we are using card groups with footers so the content will line up automatically. The above example will return the result like as shown below.

 

Bootstrap card groups example result

 

If you observe the above result, the .card-group class has rendered the cards as a single, attached element with equal width and columns.

Bootstrap Card Decks

In bootstrap, the .card-deck class is useful to render the cards as separate with equal width and height.

 

Live Preview

<div class="card-deck">

    <div class="card">

        <img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

        <div class="card-footer">

            <small class="text-muted">3 mins ago</small>

        </div>

    </div>

    <div class="card">

        <img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

        <div class="card-footer">

            <small class="text-muted">3 mins ago</small>

        </div>

    </div>

    <div class="card">

        <img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

        <div class="card-footer">

            <small class="text-muted">3 mins ago</small>

        </div>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap card decks example result

 

If you observe the above result, the .card-deck class rendered the cards with equal width and height and those are not attached to one another.

Bootstrap Card Columns

In bootstrap, the .card-columns class is useful to create the masonry like grid of cards and it will automatically adjust the cards based on the layout.

 

Live Preview

<div class="card-columns">

    <div class="card">

        <img class="card-img-top" src="/images/defaultimg.png" alt="Suresh Dasari Card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

    </div>

    <div class="card">

        <div class="card-header">

            <h5 class="card-title">Suresh Dasari</h5>

        </div>

        <div class="card-body">

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

        <div class="card-footer">

            <small class="text-muted">3 mins ago</small>

        </div>

    </div>

    <div class="card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

    </div>

    <div class="card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

    </div>

    <div class="card">

        <div class="card-body">

            <h5 class="card-title">Suresh Dasari</h5>

            <p class="card-text">Suresh Dasari is a founder and technical lead developer in tutlane.</p>

        </div>

        <div class="card-footer">

            <small class="text-muted">3 mins ago</small>

        </div>

    </div>

</div>

The above example will return the result like as shown below.

 

Bootstrap card columns example result

 

This is how we can use the cards in our bootstrap applications to create a flexible content container box to hold the wide variety of other components based on our requirements. 

Topics Covered