Extended Cards
Bootstrap Extended Cards
Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5.
While we'll continue to support for the transition period, we encourage you to migrate to
MDB5. We're offering a huge discount on MDB5 PRO to help with your transition,
enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount
Note: to start working with Extended Cards see the "Getting Started" tab on this page. They require a simple, additional setup.
Promoting card MDB Pro component
<!-- Card -->
<div class="card promoting-card">
<!-- Card content -->
<div class="card-body d-flex flex-row">
<!-- Avatar -->
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.webp" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
<!-- Content -->
<div>
<!-- Title -->
<h4 class="card-title font-weight-bold mb-2">New spicy meals</h4>
<!-- Subtitle -->
<p class="card-text"><i class="far fa-clock pr-2"></i>07/24/2018</p>
</div>
</div>
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top rounded-0" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/full page/2.webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body">
<div class="collapse-content">
<!-- Text -->
<p class="card-text collapse" id="collapseContent">Recently, we added several exotic new dishes to our restaurant menu. They come from countries such as Mexico, Argentina, and Spain. Come to us, have some delicious wine and enjoy our juicy meals from around the world.</p>
<!-- Button -->
<a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse" href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
<i class="fas fa-share-alt text-muted float-right p-1 my-1" data-toggle="tooltip" data-placement="top" title="Share this post"></i>
<i class="fas fa-heart text-muted float-right p-1 my-1 mr-3" data-toggle="tooltip" data-placement="top" title="I like it"></i>
</div>
</div>
</div>
<!-- Card -->
.collapse-content .fa.fa-heart:hover {
color: #f44336 !important;
}
.collapse-content .fa.fa-share-alt:hover {
color: #0d47a1 !important;
}
Weather card MDB Pro component
<!-- Card -->
<div class="card weather-card">
<!-- Card content -->
<div class="card-body pb-3">
<!-- Title -->
<h4 class="card-title font-weight-bold">Warsaw</h4>
<!-- Text -->
<p class="card-text">Mon, 12:30 PM, Mostly Sunny</p>
<div class="d-flex justify-content-between">
<p class="display-1 degree">23</p>
<i class="fas fa-sun-o fa-5x pt-3 amber-text"></i>
</div>
<div class="d-flex justify-content-between mb-4">
<p><i class="fas fa-tint fa-lg text-info pr-2"></i>3% Precipitation</p>
<p><i class="fas fa-leaf fa-lg grey-text pr-2"></i>21 km/h Winds</p>
</div>
<div class="progress md-progress">
<div class="progress-bar black" role="progressbar" style="width: 40%" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<ul class="list-unstyled d-flex justify-content-between font-small text-muted mb-4">
<li class="pl-4">8AM</li>
<li>11AM</li>
<li>2PM</li>
<li>5PM</li>
<li class="pr-4">8PM</li>
</ul>
<div class="collapse-content">
<div class="collapse" id="collapseExample">
<table class="table table-borderless table-sm mb-0">
<tbody>
<tr>
<td class="font-weight-normal align-middle">Tuesday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">24°<span class="text-muted">/12°</span></p>
</td>
<td class="float-right mr-3">
<i class="fas fa-sun fa-lg amber-text"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Wednesday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">19°<span class="text-muted">/10°</span></p>
</td>
<td class="float-right mr-3">
<i class="fas fa-cloud-sun-rain fa-lg text-info"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Thursday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">23°<span class="text-muted">/15°</span></p>
</td>
<td class="float-right mr-3">
<i class="fas fa-sun fa-lg amber-text"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Friday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">26°<span class="text-muted">/19°</span></p>
</td>
<td class="float-right mr-3">
<i class="fas fa-sun fa-lg amber-text"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Saturday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">20°<span class="text-muted">/16°</span></p>
</td>
<td class="float-right mr-3">
<i class="fas fa-cloud fa-lg text-info"></i>
</td>
</tr>
<tr>
<td class="font-weight-normal align-middle">Sunday</td>
<td class="float-right font-weight-normal">
<p class="mb-1">22°<span class="text-muted">/13°</span></p>
</td>
<td class="float-right mr-3">
<i class="fas fa-cloud-sun fa-lg text-info"></i>
</td>
</tr>
</tbody>
</table>
</div>
<hr class="">
<a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 deep-purple-text collapsed" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample"></a>
</div>
</div>
</div>
<!-- Card -->
Booking card MDB Pro component
.webp)
La Sirena restaurant
$ • American, Restaurant
Some quick example text to build on the card title and make up the bulk of the card's content.
Tonight's availability
-
5:30PM
-
7:30PM
-
8:00PM
-
9:00PM
<!-- Card -->
<div class="card booking-card">
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/8-col/img (5).webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title font-weight-bold"><a>La Sirena restaurant</a></h4>
<!-- Data -->
<ul class="list-unstyled list-inline rating mb-0">
<li class="list-inline-item mr-0"><i class="fas fa-star amber-text"> </i></li>
<li class="list-inline-item mr-0"><i class="fas fa-star amber-text"></i></li>
<li class="list-inline-item mr-0"><i class="fas fa-star amber-text"></i></li>
<li class="list-inline-item mr-0"><i class="fas fa-star amber-text"></i></li>
<li class="list-inline-item"><i class="fas fa-star-half-alt amber-text"></i></li>
<li class="list-inline-item"><p class="text-muted">4.5 (413)</p></li>
</ul>
<p class="mb-2">$ • American, Restaurant</p>
<!-- 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>
<hr class="my-4">
<p class="lead"><strong>Tonight's availability</strong></p>
<ul class="list-unstyled list-inline d-flex justify-content-between mb-0">
<li class="list-inline-item mr-0">
<div class="chip mr-0">5:30PM</div>
</li>
<li class="list-inline-item mr-0">
<div class="chip deep-purple white-text mr-0">7:30PM</div>
</li>
<li class="list-inline-item mr-0">
<div class="chip mr-0">8:00PM</div>
</li>
<li class="list-inline-item mr-0">
<div class="chip mr-0">9:00PM</div>
</li>
</ul>
<!-- Button -->
<a href="#" class="btn btn-flat deep-purple-text p-1 mx-0 mb-0">Button</a>
</div>
</div>
<!-- Card -->
Gradient cards MDB Pro component
Today's sale
2000$
Better than last week (25%)
Details
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.
Subscriptions
200
Worse than last week (25%)
Details
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.
Traffic
20000
Worse than last week (75%)
Details
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.
Organic traffic
2000
Better than last week (50%)
Details
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.
<!--Grid row-->
<div class="row">
<!--Grid column-->
<div class="col-md-6 mb-4">
<!-- Card -->
<div class="card gradient-card">
<div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.webp)">
<!-- Content -->
<a href="#!">
<div class="text-white d-flex h-100 mask blue-gradient-rgba">
<div class="first-content align-self-center p-3">
<h3 class="card-title">Today's sales</h3>
<p class="lead mb-0">Click on this card to see details</p>
</div>
<div class="second-content align-self-center mx-auto text-center">
<i class="far fa-money-bill-alt fa-3x"></i>
</div>
</div>
</a>
</div>
<!-- Data -->
<div class="third-content ml-auto mr-4 mb-2">
<p class="text-uppercase text-muted">Today's sale</p>
<h4 class="font-weight-bold float-right">2000$</h4>
</div>
<!-- Content -->
<div class="card-body white">
<div class="progress md-progress">
<div class="progress-bar bg-primary" role="progressbar" style="width: 25%;" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted">Better than last week (25%)</p>
<h4 class="text-uppercase font-weight-bold my-4">Details</h4>
<p class="text-muted" align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.</p>
</div>
</div>
<!-- Card -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<!-- Card -->
<div class="card gradient-card">
<div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.webp);">
<!-- Content -->
<a href="#!">
<div class="text-white d-flex h-100 mask purple-gradient-rgba">
<div class="first-content align-self-center p-3">
<h3 class="card-title">Subscriptions</h3>
<p class="lead mb-0">Click on this card to see details</p>
</div>
<div class="second-content align-self-center mx-auto text-center">
<i class="fas fa-chart-line fa-3x"></i>
</div>
</div>
</a>
</div>
<!-- Data -->
<div class="third-content ml-auto mr-4 mb-2">
<p class="text-uppercase text-muted">Subscriptions</p>
<h4 class="font-weight-bold float-right">200</h4>
</div>
<!-- Content -->
<div class="card-body white">
<div class="progress md-progress">
<div class="progress-bar purple lighten-2" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted">Worse than last week (25%)</p>
<h4 class="text-uppercase font-weight-bold my-4">Details</h4>
<p class="text-muted" align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.</p>
</div>
</div>
<!-- Card -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<!-- Card -->
<div class="card gradient-card">
<div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.webp);">
<!-- Content -->
<a href="#!">
<div class="text-white d-flex h-100 mask peach-gradient-rgba">
<div class="first-content align-self-center p-3">
<h3 class="card-title">Traffic</h3>
<p class="lead mb-0">Click on this card to see details</p>
</div>
<div class="second-content align-self-center mx-auto text-center">
<i class="fas fa-chart-pie fa-3x"></i>
</div>
</div>
</a>
</div>
<!-- Data -->
<div class="third-content ml-auto mr-4 mb-2">
<p class="text-uppercase text-muted">Traffic</p>
<h4 class="font-weight-bold float-right">20000</h4>
</div>
<!-- Content -->
<div class="card-body white animated">
<div class="progress md-progress">
<div class="progress-bar amber darken-3" role="progressbar" style="width: 75%" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted">Worse than last week (75%)</p>
<h4 class="text-uppercase font-weight-bold my-4">Details</h4>
<p class="text-muted" align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.</p>
</div>
</div>
<!-- Card -->
</div>
<!--Grid column-->
<!--Grid column-->
<div class="col-md-6 mb-4">
<!-- Card -->
<div class="card gradient-card">
<div class="card-image" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.webp);">
<!-- Content -->
<a href="#!">
<div class="text-white d-flex h-100 mask aqua-gradient-rgba">
<div class="first-content align-self-center p-3">
<h3 class="card-title">Organic traffic</h3>
<p class="lead mb-0">Click on this card to see details</p>
</div>
<div class="second-content align-self-center mx-auto text-center">
<i class="fas fa-chart-line fa-3x"></i>
</div>
</div>
</a>
</div>
<!-- Data -->
<div class="third-content ml-auto mr-4 mb-2">
<p class="text-uppercase text-muted">Organic traffic</p>
<h4 class="font-weight-bold float-right">2000</h4>
</div>
<!-- Content -->
<div class="card-body white">
<div class="progress md-progress">
<div class="progress-bar cyan lighten-1" role="progressbar" style="width: 50%" aria-valuenow="50" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<p class="text-muted">Better than last week (50%)</p>
<h4 class="text-uppercase font-weight-bold my-4">Details</h4>
<p class="text-muted" align="justify">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsam vel dolores qui, necessitatibus aut eaque magni mollitia tenetur molestiae sit quae quos quaerat amet exercitationem atque animi odio.</p>
</div>
</div>
<!-- Card -->
</div>
<!--Grid column-->
</div>
<!--Grid row-->
Chart card MDB Pro component
Alie Corporation
NYSE: AZHC • Oct 16, 1:45PM
887.32
887.02 (.03%)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima at ipsum sit amet.
<!-- Card -->
<div class="card chart-card">
<!-- Card content -->
<div class="card-body pb-0">
<!-- Title -->
<h4 class="card-title font-weight-bold">Alie Corporation</h4>
<!-- Text -->
<p class="card-text mb-4">NYSE: AZHC • Oct 16, 1:45PM</p>
<div class="d-flex justify-content-between">
<p class="display-4 align-self-end">887.32</p>
<p class="align-self-end pb-2">887.02 (.03%)</p>
</div>
</div>
<!-- Classic tabs -->
<div class="classic-tabs">
<!-- Nav tabs -->
<ul class="nav tabs-white nav-fill" role="tablist">
<li class="nav-item ml-0">
<a class="nav-link waves-light active" data-toggle="tab" href="#panel1001" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" data-toggle="tab" href="#panel1002" role="tab">Follow</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" data-toggle="tab" href="#panel1003" role="tab">Contact</a>
</li>
</ul>
<div class="tab-content rounded-bottom">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="panel1001" role="tabpanel">
<canvas id="lineChart" height="250px"></canvas>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel1002" role="tabpanel">
<p align="justify" class="font-small text-muted mx-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p align="justify" class="font-small text-muted mx-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel1003" role="tabpanel">
<img class="img-fluid z-depth-1 rounded mb-3" alt="sample image" src="https://mdbootstrap.com/img/Photos/Others/intro1.webp">
<p align="justify" class="font-small text-muted mx-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima at ipsum sit amet.</p>
</div>
<!--/.Panel 3-->
</div>
</div>
<!-- Classic tabs -->
</div>
<!-- Card -->
// Line
var ctxL = document.getElementById("lineChart").getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
labels: ["8 AM", "10 AM", "12 PM", "2 PM", "4 PM", "6 PM", "8 PM"],
datasets: [
{
fill: false,
borderColor: "#673ab7",
pointBackgroundColor: "#673ab7",
data: [885, 884, 887, 883, 888, 889, 888]
}
]
},
options: {
responsive: false,
legend: {
display: false
},
elements: {
line: {
tension: 0.0
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
},
ticks: {
padding: 15,
height: 30
}
}],
yAxes: [{
gridLines: {
drawBorder: false
},
ticks: {
maxTicksLimit: 5,
padding: 15,
min: 880,
max: 890
}
}]
}
}
});
Map card MDB Pro component
Central Park Zoo
A place to relax
25 min
Call
Love
Smile
| East 64th Street, New York, NY 10021, US | |
| Closed Opens 10 AM | |
| Sunny weather tomorrow |
<!-- Card -->
<div class="card map-card">
<!--Google map-->
<div id="map-container-google-1" class="z-depth-1-half map-container" style="height: 500px">
<iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
style="border:0" allowfullscreen></iframe>
</div>
<!-- Card content -->
<div class="card-body closed px-0">
<div class="button px-2 mt-3">
<a class="btn-floating btn-lg living-coral float-right"><i class="fas fa-bicycle"></i></a>
</div>
<div class="white px-4 pb-4 pt-3-5">
<!-- Title -->
<h5 class="card-title h5 living-coral-text">Central Park Zoo</h5>
<div class="d-flex justify-content-between living-coral-text">
<h6 class="card-subtitle font-weight-light">A place to relax</h6>
<h6 class="font-small font-weight-light mt-n1">25 min</h6>
</div>
<hr>
<div class="d-flex justify-content-between pt-2 mt-1 text-center text-uppercase living-coral-text">
<div>
<i class="fas fa-phone fa-lg mb-3"></i>
<p class="mb-0">Call</p>
</div>
<div>
<i class="fas fa-cat fa-lg mb-3"></i>
<p class="mb-0">Love</p>
</div>
<div>
<i class="far fa-grin-beam-sweat fa-lg mb-3"></i>
<p class="mb-0">Smile</p>
</div>
</div>
<hr>
<table class="table table-borderless">
<tbody>
<tr>
<th scope="row" class="px-0 pb-3 pt-2">
<i class="fas fa-map-marker-alt living-coral-text"></i>
</th>
<td class="pb-3 pt-2">East 64th Street, New York, NY 10021, US</td>
</tr>
<tr class="mt-2">
<th scope="row" class="px-0 pb-3 pt-2">
<i class="far fa-clock living-coral-text"></i>
</th>
<td class="pb-3 pt-2"><span class="deep-purple-text mr-2"> Closed</span> Opens 10 AM</td>
</tr>
<tr class="mt-2">
<th scope="row" class="px-0 pb-3 pt-2">
<i class="fas fa-cloud-moon living-coral-text"></i>
</th>
<td class="pb-3 pt-2">Sunny weather tomorrow</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Card -->
Calendar card MDB Pro component
MDB Calendar
- October
- 2018
- Mo
- Tu
- We
- Th
- Fr
- Sa
- Su
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
My calendars
<!-- Material form register -->
<div class="card card-form md-calendar">
<!--Card content-->
<div class="card-body rounded-top white-text pr-0">
<h3 class="font-weight-bold text-center text-white mt-4 mb-5 pb-3">MDB Calendar</h3>
<div class="my-4">
<ul class="list-unstyled d-flex justify-content-between mr-4">
<li class="h4">October</li>
<li class="text-white-50 mt-2">2018</li>
</ul>
</div>
<ul class="list-unstyled weekdays text-white-50">
<li>Mo</li>
<li>Tu</li>
<li>We</li>
<li>Th</li>
<li>Fr</li>
<li>Sa</li>
<li>Su</li>
</ul>
<ul class="list-unstyled days">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
<li>9</li>
<li>10</li>
<li class="active rounded-left">11</li>
<li class="active">12</li>
<li class="active">13</li>
<li class="active">14</li>
<li class="active rounded-left">15</li>
<li class="active">16</li>
<li class="active">17</li>
<li class="active">18</li>
<li class="active">19</li>
<li class="active">20</li>
<li class="active">21</li>
<li class="active">22</li>
<li class="active">23</li>
<li class="active">24</li>
<li class="active rounded-right">25</li>
<li>26</li>
<li>27</li>
<li>28</li>
<li>29</li>
<li>30</li>
<li>31</li>
</ul>
</div>
<div class="card card-form-2">
<div class="card-body">
<h6 class="mt-2 mb-4 font-weight-bold">My calendars</h6>
<!-- Filled-in checkbox -->
<div class="form-check red-checkbox pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox" checked>
<label class="form-check-label" for="filledInCheckbox">Joe Doe</label>
</div>
<!-- Filled-in checkbox -->
<div class="form-check purple-checkbox pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox4">
<label class="form-check-label" for="filledInCheckbox4">Company calendar</label>
</div>
<!-- Filled-in checkbox -->
<div class="form-check blue-checkbox pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox1" checked>
<label class="form-check-label" for="filledInCheckbox1">To-Do list</label>
</div>
<!-- Filled-in checkbox -->
<div class="form-check teal-checkbox pl-0 mb-3">
<input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox2" checked>
<label class="form-check-label" for="filledInCheckbox2">Reminders</label>
</div>
<!-- Filled-in checkbox -->
<div class="form-check unique-checkbox pl-0">
<input type="checkbox" class="form-check-input filled-in" id="filledInCheckbox3">
<label class="form-check-label" for="filledInCheckbox3">Birthday</label>
</div>
</div>
</div>
</div>
<!-- Material form register -->
Panels card MDB Pro component
15°
12:15 PM
San Francisco
Cloudy
23°
3:25 PM
New York City
Sunny
10°
10:30 AM
Seattle
Light rain
14°
8:10 PM
Milwaukee
Cloudy
25°
1:35 PM
Honolulu
Sunny
5°
7:00 AM
Anchorage
Heavy rain
<div class="card panels-card">
<div class="rounded-top grey lighten-2 dark-grey-text">
<ul class="list-inline float-right my-0 py-1 pr-3">
<li class="list-inline-item">
<i class="fab fa-facebook" aria-hidden="true"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-twitter" aria-hidden="true"></i>
</li>
<li class="list-inline-item">
<i class="fab fa-instagram" aria-hidden="true"></i>
</li>
</ul>
</div>
<!--Navbar-->
<nav class="navbar navbar-expand-lg navbar-dark grey lighten-5 d-flex justify-content-between z-depth-1-bottom">
<div>
<ul class="list-inline my-2 py-1 dark-grey-text">
<li class="list-inline-item">
<i class="fas fa-bars" aria-hidden="true"></i>
</li>
<li class="list-inline-item font-weight-bold text-uppercase">
weather
</li>
</ul>
</div>
<div>
<ul class="list-inline my-2 py-1 dark-grey-text">
<li class="list-inline-item">
<i class="fas fa-search" aria-hidden="true"></i>
<i class="fas fa-ellipsis-v pl-3" aria-hidden="true"></i>
</li>
</ul>
</div>
</nav>
<!--/.Navbar-->
<div class="card-body grey lighten-5 rounded-bottom">
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-6 p-1">
<div class="card grey lighten-2">
<div class="card-body pb-0">
<i class="fas fa-cloud fa-3x pb-4"></i>
<div class="d-flex justify-content-between">
<p class="mb-0 h5">15°</p>
<p class="mb-0 hour">12:15 PM</p>
</div>
</div>
<hr>
<div class="card-body pt-0">
<h6 class="font-weight-bold mb-1">San Francisco</h6>
<p class="mb-0">Cloudy</p>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-6 p-1">
<div class="card orange lighten-3">
<div class="card-body pb-0">
<i class="fas fa-sun fa-3x pb-4"></i>
<div class="d-flex justify-content-between">
<p class="mb-0 h5">23°</p>
<p class="mb-0 hour">3:25 PM</p>
</div>
</div>
<hr>
<div class="card-body pt-0">
<h6 class="font-weight-bold mb-1">New York City</h6>
<p class="mb-0">Sunny</p>
</div>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-6 p-1">
<div class="card indigo lighten-3">
<div class="card-body pb-0">
<i class="fas fa-tint fa-3x pb-4"></i>
<div class="d-flex justify-content-between">
<p class="mb-0 h5">10°</p>
<p class="mb-0 hour">10:30 AM</p>
</div>
</div>
<hr>
<div class="card-body pt-0">
<h6 class="font-weight-bold mb-1">Seattle</h6>
<p class="mb-0">Light rain</p>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-6 p-1">
<div class="card grey lighten-2">
<div class="card-body pb-0">
<i class="fas fa-cloud fa-3x pb-4"></i>
<div class="d-flex justify-content-between">
<p class="mb-0 h5">14°</p>
<p class="mb-0 hour">8:10 PM</p>
</div>
</div>
<hr>
<div class="card-body pt-0">
<h6 class="font-weight-bold mb-1">Milwaukee</h6>
<p class="mb-0">Cloudy</p>
</div>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-6 p-1">
<div class="card orange lighten-3">
<div class="card-body pb-0">
<i class="fas fa-sun fa-3x pb-4"></i>
<div class="d-flex justify-content-between">
<p class="mb-0 h5">25°</p>
<p class="mb-0 hour">1:35 PM</p>
</div>
</div>
<hr>
<div class="card-body pt-0">
<h6 class="font-weight-bold mb-1">Honolulu</h6>
<p class="mb-0">Sunny</p>
</div>
</div>
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-6 p-1">
<div class="card indigo white-text">
<div class="card-body pb-0">
<i class="fas fa-umbrella fa-3x pb-4"></i>
<div class="d-flex justify-content-between">
<p class="mb-0 h5">5°</p>
<p class="mb-0 hour">7:00 AM</p>
</div>
</div>
<hr class="hr-light">
<div class="card-body pt-0">
<h6 class="font-weight-bold mb-1">Anchorage</h6>
<p class="mb-0">Heavy rain</p>
</div>
</div>
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
</div>
</div>
Cards package MDB Pro component
Here you can see some of our beautiful cards. You can create your own card collage with any panels and cards you wish.
Cards Package
Fine Art Pictures Gallery
Some quick example text to build on the card title and make up the bulk of the card's content.
Opening hours
- Tuesday - Friday
-
10:00AM
-
6:00PM
- Saturday - Sunday
-
9:00AM
-
7:00PM
- Monday
-
CLOSED
Central Park Zoo
A place to relax
25 min
Call
Love
Smile
| East 64th Street, New York, NY 10021, US | |
| Closed Opens 10 AM | |
| Sunny weather tomorrow |
Marketing
This is the 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 projectAlie Corporation
NYSE: AZHC • Oct 16, 1:45PM
887.32
887.02 (.03%)
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima at ipsum sit amet.
Martha Smith
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos, adipisci
Sign up
SUBSCRIPTIONS
200
Worse than last week (25%)
New spicy meals
07/24/2018
Learn Bootstrap 4 with MDB
The most comprehensive tutorial for Bootstrap 4. Loved by over 500 000 users. Video and written versions available.
Start free tutorial
MDB
Painting
123
.webp)
Design
98
.webp)
.webp)
Technology
165
.webp)
Building
74
.webp)
.webp)
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
<!-- Card package -->
<div class="card-columns">
<!-- Booking card -->
<div class="card booking-card mt-2 mb-4">
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/water-lily.webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body">
<!-- Title -->
<h4 class="card-title font-weight-bold"><a>Fine Art Pictures Gallery</a></h4>
<!-- Data -->
<ul class="list-unstyled list-inline rating">
<li class="list-inline-item mr-0"><i class="fa fa-star"> </i></li>
<li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>
<li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>
<li class="list-inline-item mr-0"><i class="fa fa-star"></i></li>
<li class="list-inline-item"><i class="fa fa-star-half-alt"></i></li>
</ul>
<!-- 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>
<hr class="my-4">
<p class="h5 font-weight-bold mb-4">Opening hours</p>
<ul class="list-unstyled d-flex justify-content-start mb-0">
<li>Tuesday - Friday</li>
<li>
<div class="chip ml-3">10:00AM</div>
</li>
<li>
<div class="chip ml-0 mr-0">6:00PM</div>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-start mb-0">
<li>Saturday - Sunday</li>
<li>
<div class="chip ml-3">9:00AM</div>
</li>
<li>
<div class="chip ml-0 mr-0">7:00PM</div>
</li>
</ul>
<ul class="list-unstyled d-flex justify-content-start mb-0">
<li>Monday</li>
<li>
<div class="chip ml-3">CLOSED</div>
</li>
</ul>
</div>
</div>
<!-- Booking card -->
<!-- Card -->
<div class="card map-card mb-4">
<!--Google map-->
<div id="map-container-google-1" class="map-container" style="height: 500px">
<iframe src="https://maps.google.com/maps?q=manhatan&t=&z=13&ie=UTF8&iwloc=&output=embed" frameborder="0"
style="border:0" allowfullscreen></iframe>
</div>
<!-- Card content -->
<div class="card-body closed px-0">
<div class="button px-2 mt-3">
<a class="btn-floating btn-lg living-coral float-right"><i class="fas fa-bicycle"></i></a>
</div>
<div class="white px-4 pb-4 pt-3-5">
<!-- Title -->
<h5 class="card-title h5 living-coral-text">Central Park Zoo</h5>
<div class="d-flex justify-content-between living-coral-text">
<h6 class="card-subtitle font-weight-light">A place to relax</h6>
<h6 class="font-small font-weight-light mt-n1">25 min</h6>
</div>
<hr>
<div class="d-flex justify-content-between pt-2 mt-1 text-center text-uppercase living-coral-text">
<div>
<i class="fas fa-phone fa-lg mb-3"></i>
<p class="mb-0">Call</p>
</div>
<div>
<i class="fas fa-cat fa-lg mb-3"></i>
<p class="mb-0">Love</p>
</div>
<div>
<i class="far fa-grin-beam-sweat fa-lg mb-3"></i>
<p class="mb-0">Smile</p>
</div>
</div>
<hr>
<table class="table table-borderless">
<tbody>
<tr>
<th scope="row" class="px-0 pb-3 pt-2">
<i class="fas fa-map-marker-alt living-coral-text"></i>
</th>
<td class="pb-3 pt-2">East 64th Street, New York, NY 10021, US</td>
</tr>
<tr class="mt-2">
<th scope="row" class="px-0 pb-3 pt-2">
<i class="far fa-clock living-coral-text"></i>
</th>
<td class="pb-3 pt-2"><span class="deep-purple-text mr-2"> Closed</span> Opens 10 AM</td>
</tr>
<tr class="mt-2">
<th scope="row" class="px-0 pb-3 pt-2">
<i class="fas fa-cloud-moon living-coral-text"></i>
</th>
<td class="pb-3 pt-2">Sunny weather tommorow</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<!-- Card -->
<!-- Image overlay card -->
<div class="card card-image mb-4" style="background-image: url(https://mdbootstrap.com/img/Photos/Horizontal/Work/4-col/img%20%2814%29.webp);">
<!-- 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="fas fa-chart-pie"></i> Marketing</h5>
<h3 class="card-title pt-2"><strong>This is the 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="fas fa-clone left"></i> View project</a>
</div>
</div>
</div>
<!-- Image overlay card -->
<!-- Card -->
<div class="card chart-card">
<!-- Card content -->
<div class="card-body pb-0">
<!-- Title -->
<h4 class="card-title font-weight-bold">Alie Corporation</h4>
<!-- Text -->
<p class="card-text mb-4">NYSE: AZHC • Oct 16, 1:45PM</p>
<div class="d-flex justify-content-between">
<p class="display-4 align-self-end">887.32</p>
<p class="align-self-end pb-2">887.02 (.03%)</p>
</div>
</div>
<!-- Classic tabs -->
<div class="classic-tabs">
<!-- Nav tabs -->
<ul class="nav tabs-white nav-fill" role="tablist">
<li class="nav-item ml-0">
<a class="nav-link waves-light active" data-toggle="tab" href="#panel1001" role="tab">Profile</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" data-toggle="tab" href="#panel1002" role="tab">Follow</a>
</li>
<li class="nav-item">
<a class="nav-link waves-light" data-toggle="tab" href="#panel1003" role="tab">Contact</a>
</li>
</ul>
<div class="tab-content rounded-bottom">
<!--Panel 1-->
<div class="tab-pane fade in show active" id="panel1001" role="tabpanel">
<canvas id="lineChart1" height="250px"></canvas>
</div>
<!--/.Panel 1-->
<!--Panel 2-->
<div class="tab-pane fade" id="panel1002" role="tabpanel">
<p align="justify" class="font-small text-muted mx-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
<p align="justify" class="font-small text-muted mx-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima.</p>
</div>
<!--/.Panel 2-->
<!--Panel 3-->
<div class="tab-pane fade" id="panel1003" role="tabpanel">
<img class="img-fluid z-depth-1 rounded mb-3" alt="sample image" src="https://mdbootstrap.com/img/Photos/Others/intro1.webp">
<p align="justify" class="font-small text-muted mx-1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nihil odit magnam minima, soluta doloribus reiciendis molestiae placeat unde eos molestias. Quisquam aperiam, pariatur. Tempora, placeat ratione porro voluptate odit minima at ipsum sit amet.</p>
</div>
<!--/.Panel 3-->
</div>
</div>
<!-- Classic tabs -->
</div>
<!-- Card -->
<!--Card-->
<div class="card testimonial-card mt-2 mb-3">
<!-- Background color -->
<div class="card-up aqua-gradient"></div>
<!-- Avatar -->
<div class="avatar mx-auto white">
<img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2831%29.webp" class="rounded-circle img-responsive" alt="woman avatar">
</div>
<!-- Content -->
<div class="card-body">
<!-- Name -->
<h4 class="card-title font-weight-bold">Martha Smith</h4>
<hr>
<!-- Quotation -->
<p><i class="fas fa-quote-left"></i> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Eos,
adipisci</p>
</div>
</div>
<!--Card-->
<!-- Material form register -->
<div class="card card-form mt-2 mb-4">
<!--Card content-->
<div class="card-body rounded-top pink darken-4">
<h3 class="font-weight-bold text-center text-uppercase text-white mt-4">Sign up</h3>
<!-- Form -->
<form class="pb-3 px-2">
<!-- First name -->
<div class="md-form">
<i class="far fa-user prefix text-white"></i>
<input type="text" id="materialRegisterFormFirstName" class="form-control text-white">
<label class="text-white" for="materialRegisterFormFirstName">First name</label>
</div>
<!-- Last name -->
<div class="md-form">
<i class="far fa-hand-point-right prefix text-white"></i>
<input type="email" id="materialRegisterFormLastName" class="form-control text-white">
<label class="text-white" for="materialRegisterFormLastName">Last name</label>
</div>
<!-- E-mail -->
<div class="md-form mt-0">
<i class="far fa-envelope prefix text-white"></i>
<input type="email" id="materialRegisterFormEmail" class="form-control text-white">
<label class="text-white" for="materialRegisterFormEmail">E-mail</label>
</div>
<!-- Password -->
<div class="md-form">
<i class="far fa-star prefix text-white"></i>
<input type="password" id="materialRegisterFormPassword" class="form-control text-white" aria-describedby="materialRegisterFormPasswordHelpBlock">
<label class="text-white" for="materialRegisterFormPassword">Password</label>
<small id="materialRegisterFormPasswordHelpBlock" class="form-text text-white">
At least 8 characters and 1 digit
</small>
</div>
</form>
<!-- Form -->
</div>
<div class="card card-form-2 mb-0 z-depth-0">
<div class="card-body">
<!-- Form -->
<form class="text-center">
<!-- Newsletter -->
<div class="form-check my-3">
<input type="checkbox" class="form-check-input filled-in" id="materialRegisterFormNewsletter">
<label class="form-check-label" for="materialRegisterFormNewsletter">Subscribe to our newsletter</label>
</div>
<!-- Sign up button -->
<button class="btn btn-outline-red-accent btn-rounded btn-block my-4 waves-effect z-depth-0" type="submit">Sign in</button>
<!-- Social register -->
<p>or sign up with:</p>
<i class="fab fa-lg fa-facebook-f pink-accent-text px-2"></i>
<i class="fab fa-lg fa-twitter pink-accent-text px-2"></i>
<i class="fab fa-lg fa-linkedin-in pink-accent-text px-2"></i>
<i class="fab fa-lg fa-github pink-accent-text px-2"></i>
<hr>
<!-- Terms of service -->
<p>By clicking
<em>Sign up</em> you agree to our
<a class="pink-accent-text" href="#!" target="_blank">terms of service</a> and
<a class="pink-accent-text" href="#!" target="_blank">terms of service</a>. </p>
</form>
<!-- Form -->
</div>
</div>
</div>
<!-- Material form register -->
<!-- Panel -->
<div class="card mimosa mb-4 white-text">
<div class="card-body">
<div class="pull-right">
<i class="fas fa-chart-line"></i>
</div>
<p>SUBSCRIPTIONS</p>
<h4>200</h4>
</div>
<div class="progress md-progress">
<div class="progress-bar bg grey darken-3" role="progressbar" style="width: 25%" aria-valuenow="25" aria-valuemin="0" aria-valuemax="100"></div>
</div>
<div class="card-body">
<p class="mb-0">Worse than last week (25%)</p>
</div>
</div>
<!-- Panel -->
<!-- Card -->
<div class="card promoting-card mb-4">
<!-- Card content -->
<div class="card-body d-flex flex-row">
<!-- Avatar -->
<img src="https://mdbootstrap.com/img/Photos/Avatars/avatar-8.webp" class="rounded-circle mr-3" height="50px" width="50px" alt="avatar">
<!-- Content -->
<div>
<!-- Title -->
<h4 class="card-title font-weight-bold mb-2">New spicy meals</h4>
<!-- Subtitle -->
<p class="card-text"><i class="far fa-clock pr-2"></i>07/24/2018</p>
</div>
</div>
<!-- Card image -->
<div class="view overlay">
<img class="card-img-top rounded-0" src="https://mdbootstrap.com/img/Photos/Horizontal/Food/full page/2.webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body">
<div class="collapse-content">
<!-- Text -->
<p class="card-text collapse" id="collapseContent">Recently, we added several exotic new dishes to our restaurant menu. They come from countries such as Mexico, Argentina, and Spain. Come to us, have some delicious wine and enjoy our juicy meals from around the world.</p>
<!-- Button -->
<a class="btn btn-flat red-text p-1 my-1 mr-0 mml-1 collapsed" data-toggle="collapse" href="#collapseContent" aria-expanded="false" aria-controls="collapseContent"></a>
<i class="fas fa-share-alt text-muted float-right p-1 my-1" data-toggle="tooltip" data-placement="top" title="Share this post"></i>
<i class="fas fa-heart text-muted float-right p-1 my-1 mr-3" data-toggle="tooltip" data-placement="top" title="I like it"></i>
</div>
</div>
</div>
<!-- Card -->
<!-- Jumbotron -->
<div class="card blue-gradient py-2" id="intro">
<!-- Content -->
<div class="card-body text-white text-center">
<h2 class="mb-4 font-weight-bold">
Learn Bootstrap 4 with MDB
</h2>
<p class="mb-4">
<strong>The most comprehensive tutorial for the Bootstrap 4. Loved by over 500 000 users. Video and written
versions available.</strong>
</p>
<a target="_blank" href="/education/bootstrap/" class="btn btn-outline-white btn-rounded">Start
free tutorial
<i class="fas fa-graduation-cap ml-2"></i>
</a>
</div>
<!-- Content -->
</div>
<!-- Jumbotron -->
<!-- Card Wider -->
<div class="card card-cascade wider mt-2 mb-3">
<!-- Card image -->
<div class="view view-cascade overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/photo6.webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<!-- Card content -->
<div class="card-body card-body-cascade text-center">
<!-- Title -->
<h4 class="card-title"><strong>Alison Belmont</strong></h4>
<!-- Subtitle -->
<h5 class="blue-text pb-2"><strong>Graffiti Artist</strong></h5>
<!-- Text -->
<p class="card-text">Sed ut perspiciatis unde omnis iste natus sit voluptatem accusantium doloremque laudantium, totam rem aperiam. </p>
<!-- Linkedin -->
<a class="px-2 fa-lg li-ic"><i class="fab fa-linkedin-in"></i></a>
<!-- Twitter -->
<a class="px-2 fa-lg tw-ic"><i class="fab fa-twitter"></i></a>
<!-- Dribbble -->
<a class="px-2 fa-lg fb-ic"><i class="fab fa-facebook-f"></i></a>
</div>
</div>
<!-- Card Wider -->
<!-- Blue card -->
<div class="card colorful-card indigo accent-4 mt-2 mb-4">
<div class="card-body">
<div class="d-flex justify-content-between">
<div>
<!-- Title -->
<h2 class="card-title h1 font-weight-bold text-white">
<i class="fas fa-code font-weight-bold pink-text"></i> MDB</h2>
</div>
<i class="fas fa-user fa-lg text-white mt-2"></i>
</div>
<!-- Grid row -->
<div class="row mt-4">
<!-- Grid column -->
<div class="col-md-6 mb-4">
<!-- Card -->
<div class="card testimonial-card">
<!-- Background color -->
<div class="card-up indigo lighten-1">
<img src="https://mdbootstrap.com/img/Photos/Others/photo2.webp" class="img-fluid">
</div>
<!-- Avatar -->
<div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20%2810%29.webp" class="rounded-circle card-img-64">
</div>
<div class="card-body">
<!-- Name -->
<h6 class="text-uppercase indigo-accent-text pb-2">Painting</h6>
<p class="indigo-accent-text mb-0"><i class="fab fa-youtube fa-lg mr-2"></i>123</p>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 mb-4">
<!-- Card -->
<div class="card testimonial-card">
<!-- Background color -->
<div class="card-up indigo lighten-1">
<img src="https://mdbootstrap.com/img/Photos/Others/photo9.webp" class="img-fluid">
</div>
<!-- Avatar -->
<div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (20).webp" class="rounded-circle card-img-64">
</div>
<div class="card-body">
<!-- Name -->
<h6 class="text-uppercase indigo-accent-text pb-2">Design</h6>
<p class="indigo-accent-text mb-0"><i class="fab fa-youtube fa-lg mr-2"></i>98</p>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<!-- Grid row -->
<div class="row">
<!-- Grid column -->
<div class="col-md-6 mb-4">
<!-- Card -->
<div class="card testimonial-card">
<!-- Background color -->
<div class="card-up indigo lighten-1">
<img src="https://mdbootstrap.com/img/Photos/Others/img (45).webp" class="img-fluid">
</div>
<!-- Avatar -->
<div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (21).webp" class="rounded-circle card-img-64">
</div>
<div class="card-body">
<!-- Name -->
<h6 class="text-uppercase indigo-accent-text pb-2">Technology</h6>
<p class="indigo-accent-text mb-0"><i class="fab fa-youtube fa-lg mr-2"></i>165</p>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
<!-- Grid column -->
<div class="col-md-6 mb-4">
<!-- Card -->
<div class="card testimonial-card">
<!-- Background color -->
<div class="card-up indigo lighten-1">
<img src="https://mdbootstrap.com/img/Photos/Others/photo7.webp" class="img-fluid">
</div>
<!-- Avatar -->
<div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img (32).webp" class="rounded-circle card-img-64">
</div>
<div class="card-body">
<!-- Name -->
<h6 class="text-uppercase indigo-accent-text pb-2">Building</h6>
<p class="indigo-accent-text mb-0"><i class="fab fa-youtube fa-lg mr-2"></i>74</p>
</div>
</div>
<!-- Card -->
</div>
<!-- Grid column -->
</div>
<!-- Grid row -->
<div class="d-flex justify-content-between my-3">
<i class="fas fa-cogs fa-lg text-white pl-5" aria-hidden="true"></i>
<i class="fas fa-heart fa-lg yellow-darken-text" aria-hidden="true"></i>
<i class="fas fa-search fa-lg text-white pr-5" aria-hidden="true"></i>
</div>
</div>
</div>
<!-- Blue card -->
<div class="card mb-4">
<div class="view overlay">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Square/img(6).webp" alt="Card image cap">
<a href="#!">
<div class="mask rgba-white-slight"></div>
</a>
</div>
<div class="card-body p-3">
<h5 class="card-title font-weight-bold fuchsia-rose-text mb-0">Indie Funk</h5>
<p class="aqua-sky-text mb-0">Generation Funk</p>
<ul class="list-unstyled list-inline my-2">
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
<li class="list-inline-item mx-0"><i class="fas fa-star mimosa-text"></i></li>
</ul>
<p class="chili-pepper-text mb-0">19,99 $</p>
</div>
</div>
<!-- Rotating card -->
<div class="card-wrapper card-action">
<div id="card-1" class="card card-rotating text-center">
<!-- Front Side -->
<div class="face front">
<!-- Image-->
<div class="card-up">
<img class="card-img-top" src="https://mdbootstrap.com/img/Photos/Others/images/18.webp" alt="Image with a photo of clouds.">
</div>
<!-- Avatar -->
<div class="avatar mx-auto white"><img src="https://mdbootstrap.com/img/Photos/Avatars/img%20(21).webp" class="rounded-circle" alt="Sample avatar image.">
</div>
<!-- Content -->
<div class="card-body">
<p class="font-weight-bold text-uppercase pink-text mb-3">Photography</p>
<h3 class="font-weight-bold mb-3 pb-1">Hello World!</h3>
<!-- Triggering button -->
<a class="rotate-btn btn-floating btn-pink" data-card="card-1"><i class="fas fa-redo-alt"></i> Click here to rotate</a>
</div>
</div>
<!-- Front Side -->
<!-- Back Side -->
<div class="face back">
<div class="card-body">
<!-- Content -->
<h4 class="font-weight-bold">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="list-inline py-2">
<li class="list-inline-item"><a class="mx-1 btn-floating btn-pink"><i class="fab fa-facebook-f"></i></a></li>
<li class="list-inline-item"><a class="mx-1 btn-floating btn-pink"><i class="fab fa-twitter"></i></a></li>
<li class="list-inline-item"><a class="mx-1 btn-floating btn-pink"><i class="fab fa-google-plus-g"></i></a></li>
<li class="list-inline-item"><a class="mx-1 btn-floating btn-pink"><i class="fab fa-linkedin-in"></i></a></li>
</ul>
<!-- Triggering button -->
<a class="rotate-btn" data-card="card-1"><i class="fas fa-undo"></i> Click here to rotate back</a>
</div>
</div>
<!-- Back Side -->
</div>
</div>
<!-- Rotating card -->
</div>
<!-- Card package -->
.heading {
font-weight: 700;
color: #5d4267;
}
.card.colorful-card .testimonial-card .card-up {
height: 95px;
}
.card.colorful-card .testimonial-card .avatar {
border: 3px solid #fff !important;
}
.card.booking-card {
background-color: #c7f2e3;
}
.card.booking-card .fa {
color: #f7aa00;
}
.card.booking-card .card-body .card-text {
color: #db2d43;
}
.card.card.booking-card .chip {
background-color: #87e5da;
}
.card.booking-card .card-body hr {
border-top: 1px solid #f7aa00;
}
.mimosa {
background-color: #F0C05A;
}
.fuchsia-rose-text {
color: #db0075;
}
.aqua-sky-text {
color: #5cc6c3;
}
.mimosa-text {
color: #F0C05A;
}
.list-inline-item .fas, .list-inline-item .far {
font-size: .8rem;
}
.chili-pepper-text {
color: #9B1B30;
}
.collapse-content .fa.fa-heart:hover {
color: #f44336 !important;
}
.collapse-content .fa.fa-share-alt:hover {
color: #0d47a1 !important;
}
.card-wrapper.card-action {
min-height: 400px;
}
var ctxL = document.getElementById("lineChart1").getContext('2d');
var myLineChart = new Chart(ctxL, {
type: 'line',
data: {
labels: ["8 AM", "10 AM", "12 PM", "2 PM", "4 PM", "6 PM", "8 PM"],
datasets: [{
fill: false,
borderColor: "#673ab7",
pointBackgroundColor: "#673ab7",
data: [885, 884, 887, 883, 888, 889, 888]
}]
},
options: {
responsive: false,
legend: {
display: false
},
elements: {
line: {
tension: 0.0
}
},
scales: {
xAxes: [{
gridLines: {
display: false,
},
ticks: {
padding: 15,
height: 30
}
}],
yAxes: [{
gridLines: {
drawBorder: false
},
ticks: {
maxTicksLimit: 5,
padding: 15,
min: 880,
max: 890
}
}]
}
}
});
Bootstrap extended cards - getting started : download & setup
Download
All of these free components and features are part of MDBootstrap package.
MDBootstrap (Material Design for Bootstrap) is a free (MIT Licensed) framework combining Material Design and the latest Bootstrap 4.
Click on the button below to go to the Download Page, where you can download the MDBootstrap package.
MDBootstrap Download MDBootstrap AboutMDB Pro
Using components and features labeled as MDB Pro component requires MDB Pro package.
Click the button below to learn more about MDBbootstrap Pro package
MDBootstrap ProExtended Cards Setup
After downloading and extracting MDB package, open the index.html file.
Then, below the linked CSS files add this Extended Cards code.
<!-- MDBootstrap Cards Extended Pro -->
<link href="css/addons-pro/cards-extended.min.css" rel="stylesheet">
Note: Extended cards do NOT require additional JavaScript files.
If you need additional help, have a look at the video tutorial below.
Note: The tutorial below refers to another addon (Steppers) but the procedure is exactly the same for the Extended Cards addon.
Tutorials
If you need additional help to start, use our "5 min Quick Start" or "Full tutorial" resources.
5 min Quick Start Full TutorialCompilation
To reduce the size of the MDBootstrap package, you can compile your own, custom package containing only components and features you need.
Map of dependencies of SCSS files in MDBootstrap:
Legend:
'-->' means 'required'
All free and pro files require files from 'core' catalog
'none' means 'this component doesn't require anything except core files'
A file wrapped by `< >` means that this file make the base component prettier but it isn't necessary for the proper working
All PRO components require 'pro/_variables.scss' file
scss/
|
|-- core/
| |
| |-- bootstrap/
| | |-- _functions.scss
| | |-- _variables.scss
| |
| |-- _colors.scss
| |-- _global.scss
| |-- _helpers.scss
| |-- _masks.scss
| |-- _mixins.scss
| |-- _typography.scss
| |-- _variables.scss
| |-- _waves.scss
|
|-- free/
| |-- _animations-basic.scss --> none
| |-- _animations-extended.scss --> _animations-basic.scss
| |-- _buttons.scss --> none
| |-- _cards.scss --> none <_buttons.scss>
| |-- _dropdowns.scss --> none <_buttons.scss>
| |-- _input-group.scss --> _forms.scss, _buttons.scss, _dropdowns.scss
| |-- _navbars.scss --> none <_buttons.scss, _forms.scss, _input-group.scss>
| |-- _pagination.scss --> none
| |-- _badges.scss --> none
| |-- _modals.scss --> _buttons.scss, _forms.scss (PRO --> _tabs.scss)
| |-- _carousels.scss --> <_buttons.scss>
| |-- _forms.scss --> none
| |-- _msc.scss --> none <_buttons.scss, _forms.scss, _cards.scss>
| |-- _footers.scss none <_buttons.scss> (PRO: )
| |-- _list-group.scss --> none
| |-- _tables.scss --> none (PRO: _material-select.scss, pro/_forms.scss, _checkbox.scss, pro/_buttons.scss, pro/_cards.scss, _pagination.scss, pro/_msc.scss)
| |-- _depreciated.scss
|
|-- pro/
| |
| |-- picker/
| | |-- _default.scss --> none
| | |-- _default-time.scss --> _default.scss, free/_forms.scss, free/_buttons.scss, pro/_buttons.scss, free/_cards.scss
| | |-- _default-date.scss --> _default.scss, free/_forms.scss
| |
| |-- sections/
| | |-- _templates.scss --> _sidenav.scss
| | |-- _social.scss --> free/_cards.scss, free/ _forms.scss, free/_buttons.scss, pro/_buttons.scss,
| | |-- _team.scss --> free/_buttons.scss, pro/_buttons.scss, free/_cards.scss, pro/_cards.scss
| | |-- _testimonials.scss --> free/_carousels.scss, pro/_carousels.scss, free/_buttons.scss, pro/_buttons.scss
| | |-- _magazine.scss --> _badges.scss
| | |-- _pricing.scss --> free/_buttons.scss, pro/_buttons.scss
| | |-- _contacts.scss --> free/_forms.scss, pro/_forms.scss, free/_buttons.scss, pro/_buttons.scss
| |
| |-- _variables.scss
| |-- _buttons.scss --> free/_buttons.scss, pro/_msc.scss, _checkbox.scss, _radio.scss
| |-- _social-buttons.scss --> free/_buttons.scss, pro/_buttons.scss
| |-- _tabs.scss --> _cards.scss
| |-- _cards.scss --> free/_cards.scss <_buttons.scss, _social-buttons.scss>
| |-- _dropdowns.scss --> free/_dropdowns.scss, free/_buttons.scss
| |-- _navbars.scss --> free/_navbars.scss (PRO: )
| |-- _scrollspy.scss --> none
| |-- _lightbox.scss --> none
| |-- _chips.scss --> none
| |-- _msc.scss --> none
| |-- _forms.scss --> none
| |-- _radio.scss --> none
| |-- _checkbox.scss --> none
| |-- _material-select.scss --> none
| |-- _switch.scss --> none
| |-- _file-input.scss --> free/_forms.scss, free/_buttons.scss
| |-- _range.scss --> none
| |-- _input-group.scss --> free/_input-group.scss and the same what free input group, _checkbox.scss, _radio.scss
| |-- _autocomplete.scss --> free/_forms.scss
| |-- _accordion.scss --> pro/_animations.scss, free/_cards.scss
| |-- _parallax.scss --> none
| |-- _sidenav.scss --> free/_forms.scss, pro/_animations.scss, sections/_templates.scss
| |-- _ecommerce.scss --> free/_cards.scss, pro/_cards.scss, free/_buttons.scss, pro/_buttons.scss, pro/_msc.scss
| |-- _carousels.scss --> free/_carousels.scss, free/_cards.scss, free/_buttons.scss
| |-- _steppers.scss --> free/_buttons.scss
| |-- _blog.scss --> none
| |-- _toasts.scss --> free/_buttons.scss
| |-- _animations.scss --> none
| |-- _charts.scss --> none
| |-- _progress.scss --> none
| |-- _scrollbar.scss --> none
| |-- _skins.scss --> none
| |-- _depreciated.scss
|
`-- _custom-skin.scss
`-- _custom-styles.scss
`-- _custom-variables.scss
`-- mdb.scss
Map of dependencies of JavaScript modules in MDBootstrap:
Legend:
'-->' means 'required'
All files require jQuery and bootstrap.js
js/
├── dist/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
├── _intro-mdb-pro.js
├── modules.js
├── src/
│ ├── buttons.js
│ ├── cards.js
│ ├── character-counter.js
│ ├── chips.js
│ ├── collapsible.js --> vendor/velocity.js
│ ├── dropdown.js --> Popper.js, jquery.easing.js
│ ├── file-input.js
│ ├── forms-free.js
│ ├── material-select.js --> dropdown.js
│ ├── mdb-autocomplete.js
│ ├── preloading.js
│ ├── range-input.js --> vendor/velocity.js
│ ├── scrolling-navbar.js
│ ├── sidenav.js --> vendor/velocity.js, vendor/hammer.js, vendor/jquery.hammer.js
│ └── smooth-scroll.js
└── vendor/
├── addons/
│ ├── datatables.js
│ └── datatables.min.js
├── chart.js
├── enhanced-modals.js
├── hammer.js
├── jarallax.js
├── jarallax-video.js --> vendor/jarallax.js
├── jquery.easing.js
├── jquery.easypiechart.js
├── jquery.hammer.js --> vendor/hammer.js
├── jquery.sticky.js
├── lightbox.js
├── picker-date.js --> vendor/picker.js
├── picker.js
├── picker-time.js --> vendor/picker.js
├── scrollbar.js
├── scrolling-navbar.js
├── toastr.js
├── velocity.js
├── waves.js
└── wow.js
Compilation & Customization tutorial
If you need additional help to compile your custom package, please use our Compilation & Customization tutorial
Compilation & Customization tutorialIntegrations with Angular, React or Vue
Apart from standard Bootstrap integration with jQuery, MDBootstrap provides integrations with Angular, React and Vue.
About MDB Angular About MDB React About MDB Vue