Bootstrap cards
Bootstrap cards are components which display content build of different elements with characteristic shadows, depth and hover effects.
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.
Basic example
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 content-->
<div class="card-body">
<!--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>
</div>
<!--/.Card-->
Waves 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"></div>
</a>
</div>
<!--Card content-->
<div class="card-body">
<!--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>
</div>
<!--/.Card-->
Cascading cards MDB Pro component
Add .card-cascade
to the .card
to achieve cascading effect. You can manipulate the width of
the image by adding .wider
or .narrower
class to the .card
.
Wider
Narrower
Culinary
Cheat day inspirations
Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.
Button
<!--Card Wider-->
<div class="card card-cascade wider">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/People/6-col/img%20%283%29.jpg" class="img-fluid">
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Title-->
<h4 class="card-title"><strong>Alice Mayer</strong></h4>
<h5 class="indigo-text"><strong>Photographer</strong></h5>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>
<!--Linkedin-->
<a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
<!--Twitter-->
<a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
<!--Dribbble-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
</div>
<!--/.Card content-->
</div>
<!--/.Card Wider-->
<!--Card Narrower-->
<div class="card card-cascade narrower">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Lightbox/Thumbnail/img%20(147).jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<h5 class="pink-text"><i class="fa fa-cutlery"></i> Culinary</h5>
<!--Title-->
<h4 class="card-title">Cheat day inspirations</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-unique">Button</a>
</div>
<!--/.Card content-->
</div>
<!--/.Card Narrower-->
<!--Card Regular-->
<div class="card card-cascade">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Others/men.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Title-->
<h4 class="card-title"><strong>Billy Cullen</strong></h4>
<h5>Web developer</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam.
</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-dribbble"><i class="fa fa-dribbble"></i></a>
</div>
<!--/.Card content-->
</div>
<!--/.Card Regular-->
Cascading panels
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi.
Title of the news
26.07.2017
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum.
Read more
Marta
Deserve for her own card
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam.
<!--Card-->
<div class="card card-cascade">
<!--Card image-->
<div class="view gradient-card-header blue-gradient">
<h2 class="h2-responsive">Heading</h2>
<p>Subheading</p>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-body text-center">
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptatibus, ex, recusandae. Facere modi
sunt, quod quibusdam dignissimos neque rem nihil ratione est placeat vel, natus non quos laudantium
veritatis sequi.Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit
laboriosam.</p>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
Reversed cascade
<!--Card-->
<div class="card card-cascade wider reverse my-4">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg" class="img-fluid">
<a href="#!">
<div class="mask"></div>
</a>
</div>
<!--/Card image-->
<!--Card content-->
<div class="card-body text-center">
<!--Title-->
<h4 class="card-title"><strong>My adventure</strong></h4>
<h5 class="indigo-text"><strong>Photography</strong></h5>
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
</p>
<!--Linkedin-->
<a class="icons-sm li-ic"><i class="fa fa-linkedin"> </i></a>
<!--Twitter-->
<a class="icons-sm tw-ic"><i class="fa fa-twitter"> </i></a>
<!--Dribbble-->
<a class="icons-sm fb-ic"><i class="fa fa-facebook"> </i></a>
</div>
<!--/.Card content-->
</div>
<!--/.Card-->
Action button & footer MDB Pro component
<!--Card-->
<div class="card">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Others/food.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></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-body">
<!--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-->
Flat buttons MDB Pro component
Ligt version
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%28131%29.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--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 version
Add a class .card-dark
to use a dark variation.
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 Dark-->
<div class="card card-dark">
<!--Card image-->
<div class="view overlay hm-white-slight">
<img src="https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2821%29.jpg" class="img-fluid" alt="">
<a>
<div class="mask"></div>
</a>
</div>
<!--/.Card image-->
<!--Card content-->
<div class="card-body">
<!--Social shares button-->
<a class="activator"><i class="fa fa-share-alt white-text"></i></a>
<!--Title-->
<h4 class="card-title">Card title</h4>
<hr>
<!--Text-->
<p class="card-text white-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 MDB Pro component
To change a background color use one of over 300 color classes from our palette.
Anna Doe
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
Martha Smith
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
<!--Card-->
<div class="card testimonial-card">
<!--Bacground color-->
<div class="card-up indigo lighten-1">
</div>
<!--Avatar-->
<div class="avatar"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.jpg" class="rounded-circle">
</div>
<div class="card-body">
<!--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-->
Image overlay MDB Pro component
Marketing
This is card 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 projectSoftware
This is card 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 card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.jpg);">
<!-- Content -->
<div class="text-white text-center d-flex align-items-center rgba-black-strong py-5 px-4">
<div>
<h5 class="pink-text"><i class="fa fa-pie-chart"></i> Marketing</h5>
<h3 class="card-title pt-2"><strong>This is card title</strong></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-pink"><i class="fa fa-clone left"></i> View project</a>
</div>
</div>
<!-- Content -->
</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 thebackground-color
andborder-color
to go with it.