Bootstrap panels

While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.

Panels are similar to cards (often they use the same classes), 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-block">
    <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="col-md-6">

    <!--Card Primary-->
    <div class="card card-primary text-center z-depth-2">
        <div class="card-block">
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </div>
    </div>
    <!--/.Card Primary-->

    <!--Card Danger-->
    <div class="card card-danger text-center z-depth-2">
        <div class="card-block">
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </div>
    </div>
    <!--/.Card Danger-->

    <!--Card Success-->
    <div class="card card-success text-center z-depth-2">
        <div class="card-block">
            <p class="white-text">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 card-warning text-center z-depth-2">
        <div class="card-block">
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </div>
    </div>
    <!--/.Card Warning-->

    <!--Card Info-->
    <div class="card card-info text-center z-depth-2">
        <div class="card-block">
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </div>
    </div>
    <!--/.Card Info-->

    <!--Card Default-->
    <div class="card default-color text-center z-depth-2">
        <div class="card-block">
            <p class="white-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
        </div>
    </div>
    <!--/.Card Default-->

</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


<!--Jumbotron-->
<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>
    <p class="lead">
        <a class="btn btn-primary btn-lg" role="button">Learn more</a>
    </p>
</div>
<!--/.Jumbotron-->