Bootstrap panels
Bootstrap panels are bordered boxes where you can place texts, lists, tables and other content. Panels are similar to cards, but they don't include media.
Basic example
Panel title
Some quick example text to build on the card title and make up the bulk of the card's content.
<!--Panel-->
<div class="card card-body">
<h4 class="card-title">Panel title</h4>
<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="flex-row">
<a class="card-link">Card link</a>
<a class="card-link">Another link</a>
</div>
</div>
<!--/.Panel-->
Background variants
Panels and cards include their variant classes for quickly changing the background-color
of a card.
Darker colors require the use of .white-text
.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.
<div class="row">
<div class="col-md-6">
<!--Card Primary-->
<div class="card indigo text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Primary-->
<br>
<!--Card Danger-->
<div class="card pink lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Danger-->
<br>
<!--Card Success-->
<div class="card info-color text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Success-->
</div>
<div class="col-md-6">
<!--Card Warning-->
<div class="card red lighten-1 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Warning-->
<br>
<!--Card Info-->
<div class="card success-color text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Info-->
<br>
<!--Card Default-->
<div class="card mdb-color lighten-2 text-center z-depth-2">
<div class="card-body">
<p class="white-text mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere
erat a ante.</p>
</div>
</div>
<!--/.Card Default-->
</div>
</div>
Jumbotron
A lightweight, flexible component that can optionally extend the entire viewport to showcase key marketing messages on your site.
Hello, world!
This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.
It uses utility classes for typography and spacing to space content out within the larger container.
Learn more
<div class="jumbotron">
<h1 class="h1-responsive">Hello, world!</h1>
<p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention
to featured content or information.</p>
<hr class="my-2">
<p>It uses utility classes for typography and spacing to space content out within the larger
container.
</p>
<a class="btn btn-primary btn-lg" role="button">Learn more</a>
</div>