Tutorial by Examples

By default, all the .panel does is apply some basic border and padding to contain some content. <div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>

Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6> with a .panel-title class to add a pre-styled heading. However, the font sizes of <h1>-<h6> are overridden by .panel-heading. For proper link coloring, be sure to place links...

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground. <div class="panel panel-default"> <div class="panel-body"> Panel content...