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>