Hey there! This section was updated recently. If you're looking for 4.2.0 docs please visit this site

Bootstrap cards

A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and great display options.

It is hard to think of a better way of displaying your content to users other than by cards. Some of the biggest players like Facebook or Google are well aware of that, as you might have noticed in almost all their products.

Cards provide you with clarity, clean content categorisation and attractive form of presenting it to the users.

MDB enhances Bootstrap cards with characteristic Material Design features, such as slight shadows, depth, cascading or waves effects. Apart from that, it enriches it with additional optional animations, social icons, avatars and various other effects not available in a native Bootstrap.

If you are looking for Product Cards have a look at our E-commerce section

Basic example

Cards require a small amount of markup and classes to provide you with as much control as possible. These classes and markup are flexible though and can typically be remixed and extended with ease. For example, if your card has no flush content like images, feel free to put the .card-block class on the .card element to consolidate your markup.


Card image cap

Card title

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

Button

<!--Card-->
<div class="card">

    <!--Card image-->
    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%282%29.jpg" alt="Card image cap">
    <!--/.Card image-->

    <!--Card content-->
    <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <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">Button</a>
    </div>
    <!--/.Card content-->

</div>
<!--/.Card-->

Waves effect

You can improve your card by adding a waves effect to the image together with a subtle hover effect.

Card title

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

Button

<!--Card-->
<div class="card">

    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%287%29.jpg" class="img-fluid" alt="">
        <a href="#">
            <div class="mask waves-effect waves-light"></div>
        </a>
    </div>
    <!--/.Card image-->

    <!--Card content-->
    <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <!--Text-->
        <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">Button</a>
    </div>
    <!--/.Card content-->

</div>
<!--/.Card-->

Cascading cards Premium component

Alice Mayer

Photographer

Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.

Business

Let your startup grow!

Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.

Button

Billy Cullen

Web developer

Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.


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

    <!--Card-->
    <div class="card card-cascade wider">

        <!--Card image-->
        <div class="view overlay hm-white-slight">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2813%29.jpg" class="img-fluid">
            <a href="#!">
                <div class="mask waves-effect waves-light"></div>
            </a>
        </div>
        <!--/Card image-->

        <!--Card content-->
        <div class="card-block text-center">
            <!--Title-->
            <h4 class="card-title"><strong>Alice Mayer</strong></h4>
            <h5>Photographer</h5>

            <p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>

            <!--Dribbble-->
            <a class="icons-sm drib-ic"><i class="fa fa-dribbble"> </i></a>
            <!--Linkedin-->
            <a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
            <!--Google +-->
            <a class="icons-sm gplus-ic"><i class="fa fa-google-plus"> </i></a>
            <!--Instagram-->
            <a class="icons-sm ins-ic"><i class="fa fa-instagram"> </i></a>

        </div>
        <!--/.Card content-->

    </div>
    <!--/.Card-->

</div>

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

    <!--Card-->
    <div class="card card-cascade narrower">

        <!--Card image-->
        <div class="view overlay hm-white-slight">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2840%29.jpg" class="img-fluid" alt="">
            <a>
                <div class="mask waves-effect waves-light"></div>
            </a>
        </div>
        <!--/.Card image-->

        <!--Card content-->
        <div class="card-block">
            <h5 class="red-text"><i class="fa fa-money"></i> Business</h5>
            <!--Title-->
            <h4 class="card-title">Let your startup grow!</h4>
            <!--Text-->
            <p class="card-text">Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.</p>
            <a class="btn btn-primary">Button</a>
        </div>
        <!--/.Card content-->

    </div>
    <!--/.Card-->

</div>

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

    <!--Card-->
    <div class="card card-cascade">

        <!--Card image-->
        <div class="view overlay hm-white-slight">
            <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2842%29.jpg" class="img-fluid" alt="">
            <a>
                <div class="mask waves-effect waves-light"></div>
            </a>
        </div>
        <!--/.Card image-->

        <!--Card content-->
        <div class="card-block text-center">
            <!--Title-->
            <h4 class="card-title"><strong>Billy Cullen</strong></h4>
            <h5>Web developer</h5>

            <p class="card-text">Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates.
            </p>

            <!--Facebook-->
            <a type="button" class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"></i></a>
            <!--Twitter-->
            <a type="button" class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"></i></a>
            <!--Google +-->
            <a type="button" class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"></i></a>

        </div>
        <!--/.Card content-->

    </div>
    <!--/.Card-->

</div>

Elegant card Premium component

Card title


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


<!--Card-->
<div class="card">

    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2842%29.jpg" class="img-fluid" alt="">
        <a>
            <div class="mask waves-effect waves-light"></div>
        </a>
    </div>
    <!--/.Card image-->

    <!--Button-->
    <a class="btn-floating btn-action"><i class="fa fa-chevron-right"></i></a>

    <!--Card content-->
    <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <hr>
        <!--Text-->
        <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>
    </div>
    <!--/.Card content-->

    <!-- Card footer -->
    <div class="card-data">
        <ul>
            <li><i class="fa fa-clock-o"></i> 05/10/2015</li>
            <li><a href="#"><i class="fa fa-comments-o"></i>12</a></li>
            <li><a href="#"><i class="fa fa-facebook"> </i>21</a></li>
            <li><a href="#"><i class="fa fa-twitter"> </i>5</a></li>
        </ul>
    </div>
    <!-- Card footer -->

</div>
<!--/.Card-->

Stylish cards Premium component


Card title


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

Read more

Card title


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

Read more

<!--Card Light-->
<div class="card">
    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2851%29.jpg" class="img-fluid" alt="">
        <a>
            <div class="mask waves-effect waves-light"></div>
        </a>
    </div>
    <!--/.Card image-->
    <!--Card content-->
    <div class="card-block">
        <!--Social shares button-->
        <a class="activator"><i class="fa fa-share-alt"></i></a>
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <hr>
        <!--Text-->
        <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="black-text d-flex flex-row-reverse"><h5 class="waves-effect p-2">Read more <i class="fa fa-chevron-right"></i></h5></a>
    </div>
    <!--/.Card content-->
</div>
<!--/.Card Light-->


Dark variation

Add a class .card-dark to use a dark variation.


<!--Card Dark-->
<div class="card card-dark">
    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2854%29.jpg" class="img-fluid" alt="">
        <a>
            <div class="mask waves-effect waves-light"></div>
        </a>
    </div>
    <!--/.Card image-->
    <!--Card content-->
    <div class="card-block">
        <!--Social shares button-->
        <a class="activator"><i class="fa fa-share-alt"></i></a>
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <hr>
        <!--Text-->
        <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="d-flex flex-row-reverse"><h5 class="waves-effect waves-light p-2">Read more <i class="fa fa-chevron-right"></i></h5></a>
    </div>
    <!--/.Card content-->
</div>
<!--/.Card Dark-->
    

Testimonial card Premium component

To change a background color use one of over 300 color classes from our palette.


Sample avatar image.

John Doe


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci


<!--Card-->
<div class="card testimonial-card">

    <!--Bacground color-->
    <div class="card-up default-color-dark">
    </div>

    <!--Avatar-->
    <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%288%29.jpg" class="rounded-circle img-responsive">
    </div>

    <div class="card-block">
        <!--Name-->
        <h4 class="card-title">Anna Doe</h4>
        <hr>
        <!--Quotation-->
        <p><i class="fa fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci</p>
    </div>

</div>
<!--/.Card-->

Rotating card Premium component

Image with a photo of clouds.
Sample avatar image.

Jonathan Doe

Web developer

Click here to rotate

About me


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?


Click here to rotate back

<!--Rotating card-->
<div class="card-wrapper">
    <div id="card-1" class="card-rotating effect__click">

        <!--Front Side-->
        <div class="face front">

            <!-- Image-->
            <div class="card-up">
                <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2859%29.jpg" class="img-fluid">
            </div>
            <!--Avatar-->
            <div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%289%29.jpg" class="rounded-circle img-responsive">
            </div>
            <!--Content-->
            <div class="card-block">
                <h4>Jonathan Doe</h4>
                <p>Web developer</p>
                <!--Triggering button-->
                <a class="rotate-btn" data-card="card-1"><i class="fa fa-repeat"></i> Click here to rotate</a>
            </div>
        </div>
        <!--/.Front Side-->

        <!--Back Side-->
        <div class="face back">

            <!--Content-->
            <h4>About me</h4>
            <hr>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Maxime quae, dolores dicta. Blanditiis rem amet repellat, dolores nihil quae in mollitia asperiores ut rerum repellendus, voluptatum eum, officia laudantium quaerat?</p>
            <hr>
            <!--Social Icons-->
            <ul class="inline-ul">
                <li><a class="icons-sm fb-ic"><i class="fa fa-facebook"></i></a></li>
                <li><a class="icons-sm tw-ic"><i class="fa fa-twitter"></i></a></li>
                <li><a class="icons-sm gplus-ic"><i class="fa fa-google-plus"></i></a></li>
                <li><a class="icons-sm li-ic"><i class="fa fa-linkedin"></i></a></li>
            </ul>
            <!--Triggering button-->
            <a class="rotate-btn" data-card="card-1"><i class="fa fa-undo"></i> Click here to rotate back</a>

        </div>
        <!--/.Back Side-->

    </div>
</div>
<!--/.Rotating card-->                        

Social reveal Premium component

Click on the button to launch the animation.

Card title


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


<!--Card-->
<div class="card">
    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2867%29.jpg" class="img-fluid" alt="">
        <a>
            <div class="mask waves-effect waves-light"></div>
        </a>
    </div>
    <!--/.Card image-->
    <!--Social buttons-->
    <div class="card-share">
        <div class="social-reveal">
            <!--Facebook-->
            <a type="button" class="btn-floating btn-fb"><i class="fa fa-facebook"></i></a>
            <!--Twitter-->
            <a type="button" class="btn-floating btn-tw"><i class="fa fa-twitter"></i></a>
            <!--Google -->
            <a type="button" class="btn-floating btn-gplus"><i class="fa fa-google-plus"></i></a>
        </div>
        <a class="btn-floating btn-action share-toggle primary-color-dark float-right"><i class="fa fa-share-alt"></i></a>
    </div>
    <!--/Social buttons-->
    <!--Card content-->
    <div class="card-block">
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <hr>
        <!--Text-->
        <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>
        <div class="text-center">
            <a class="btn btn-primary">Read more</a>
        </div>
    </div>
    <!--/.Card content-->
</div>
<!--/.Card-->

Social animations Premium component

Click on the "share" button to launch the animation.


Reveal animation

Card title


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

Read more

Social shares


Join our community


<!--Card-->
<div class="card ovf-hidden">
    <!--Card image-->
    <div class="view overlay hm-white-slight">
        <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28108%29.jpg" class="img-fluid" alt="">
        <a>
            <div class="mask waves-effect waves-light"></div>
        </a>
    </div>
    <!--/.Card image-->
    <!--Card content-->
    <div class="card-block">
        <!--Social shares button-->
        <a class="activator"><i class="fa fa-share-alt"></i></a>
        <!--Title-->
        <h4 class="card-title">Card title</h4>
        <hr>
        <!--Text-->
        <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 class="link-text"><h5>Read more <i class="fa fa-chevron-right"></i></h5></a>
    </div>
    <!--/.Card content-->
    <!--Card reveal-->
    <div class="card-reveal">
        <!--Content-->
        <div class="content text-center">
            <h4 class="card-title">Social shares <i class="fa fa-close"></i></h4>
            <hr>
            <!--Social Icons-->
            <ul class="inline-ul">
                <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
            </ul>
            <h5>Join our community</h5>
            <hr>
            <!--Social Icons-->
            <ul class="inline-ul">
                <li><a class="btn btn-fb"><i class="fa fa-facebook"> </i></a></li>
                <li><a class="btn btn-tw"><i class="fa fa-twitter"> </i></a></li>
                <li><a class="btn btn-li"><i class="fa fa-linkedin"> </i></a></li>
                <li><a class="btn btn-ins"><i class="fa fa-instagram"> </i></a></li>
            </ul>
        </div>
        <!--/.Content-->
    </div>
    <!--/.Card reveal-->
</div>
<!--/.Card-->

Rotating animation

Card title


Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.

Read more

Social shares


Join our community


<!--Rotating card-->
<div class="card-wrapper">
    <div id="card-2" class="card-rotating effect__click">

        <!--Front Side-->
        <div class="face front card">

            <!-- Image-->
            <div class="card-up">
                <div class="view overlay hm-white-slight">
                    <img src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%28110%29.jpg" class="img-fluid" alt="">
                    <a>
                        <div class="mask waves-effect waves-light"></div>
                    </a>
                </div>
            </div>
            <!--/.Image-->

            <!--Content-->
            <div class="content">
                <a class="rotate-btn" data-card="card-2"><i class="fa fa-share-alt"></i></a>
                <h4>Card title</h4>
                <hr>
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugiat tenetur odio suscipit non commodi vel eius veniam maxime.</p>

                <a class="link-text"><h5>Read more <i class="fa fa-chevron-right"></i></h5></a>
            </div>
            <!--/.Content-->

        </div>
        <!--/.Front Side-->

        <!--Back Side-->
        <div class="face back">

            <!--Title-->
            <h4 class="card-title">Social shares <i class="fa fa-close rotate-btn" data-card="card-2"></i> </h4>
            <hr>

            <!--Social Icons-->
            <ul class="inline-ul">
                <li><a class="btn-floating btn-small btn-fb"><i class="fa fa-facebook"> </i></a></li>
                <li><a class="btn-floating btn-small btn-tw"><i class="fa fa-twitter"> </i></a></li>
                <li><a class="btn-floating btn-small btn-gplus"><i class="fa fa-google-plus"> </i></a></li>
                <li><a class="btn-floating btn-small btn-li"><i class="fa fa-linkedin"> </i></a></li>
                <li><a class="btn-floating btn-small btn-git"><i class="fa fa-github"> </i></a></li>
                <li><a class="btn-floating btn-small btn-pin"><i class="fa fa-pinterest"> </i></a></li>
                <li><a class="btn-floating btn-small btn-ins"><i class="fa fa-instagram"> </i></a></li>
            </ul>

            <h5>Join our community</h5>
            <hr>

            <!--Social Icons-->
            <ul class="inline-ul">
                <li><a class="btn btn-fb"><i class="fa fa-facebook"> </i></a></li>
                <li><a class="btn btn-tw"><i class="fa fa-twitter"> </i></a></li>
                <li><a class="btn btn-li"><i class="fa fa-linkedin"> </i></a></li>
                <li><a class="btn btn-ins"><i class="fa fa-instagram"> </i></a></li>
            </ul>

        </div>
        <!--/.Back Side-->

    </div>
</div>
<!--/.Rotating card-->

Image overlays Premium component

Turn an image into a card background and overlay your card’s text.

Marketing

Project title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
Software

Project title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit sed qui, dolorum!.

View project
                              
<!--Card-->
<div class="card-overlay" style="background-image: url('https://mdbootstrap.com/img/Photos/Exposure/Dark/courses.jpg')">

    <!--Content-->
    <div class="white-text text-center">
        <div class="card-block">
            <h5 class="teal-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
            <h3>Project title</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Repellat fugiat, laboriosam, voluptatem, optio vero odio nam sit officia accusamus minus error nisi architecto nulla ipsum dignissimos. Odit
                sed qui, dolorum!.</p>
            <a class="btn btn-lg btn-white-outline"><i class="fa fa-clone left"></i> View project</a>
        </div>
    </div>
</div>
<!--/.Card-->

Inverted text

Cards include a class for quickly toggling the text color. By default, cards use dark text and assume a light background. Add .card-inverse for white text and specify the background-color and border-color to go with it.


<!--Card Inverse-->
<div class="card card-inverse">

    <!--Image-->
    <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Exposure/Dark/university.jpg" alt="Card image">

    <!--Content-->
    <div class="card-img-overlay">
        <h4 class="card-title">Card title</h4>
        <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
        <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
    </div>

</div>
<!--/.Card Inverse-->
                            

Groups

Use card groups to render cards as a single, attached element with an equal width and height columns. By default, card groups use display: table; and table-layout: fixed; to achieve their uniform sizing. However, enabling flexbox mode can switch that to use display: flex; and provide the same effect.

Only applies to small devices and above.

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.

Last updated 3 mins ago

Card image cap

Card title

This card has supporting text below as a natural lead-in to additional content.

Last updated 3 mins ago

Card image cap

Card title

This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.

Button

Last updated 3 mins ago


<div class="card-group">
    <div class="card">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2813%29.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2840%29.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This card has supporting text below as a natural lead-in to additional content.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
    <div class="card">
        <img class="img-fluid" src="https://mdbootstrap.com/img/Photos/Horizontal/Nature/4-col/img%20%2842%29.jpg" alt="Card image cap">
        <div class="card-block">
            <h4 class="card-title">Card title</h4>
            <p class="card-text">This is a wider card with supporting text below as a natural lead-in to additional content. This card has even longer content than the first to show that equal height action.</p>
            <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
        </div>
    </div>
</div>