Panels

stylesheet

panels.less

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

Basic example

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>

Panel with heading

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.

For proper link coloring, be sure to place links in headings within .panel-title.

Panel with footer

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.

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

With tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

If there is no panel body, the component moves from panel header to table without interruption.

With list groups

Easily include full-width list groups within any panel.