Panels

Bootstrap panels are a great ways to visually organize your content in a box. Beside simply adding content, we can also add headers and footers to them,  host tables and any other elements in it.

The most basic panel can be defined like this:

Example

<div class="panel panel-default">
	<div class="panel-body">
		Here is our panel-content
	</div>
</div>

Play with example »

Headers and footers
Having simple panels is nice, but having the ability to add headers and footers to the panel is a really nice feature as well! Of course you are free to use only either of them.

Example

<div class="panel panel-default">
	<div class="panel-heading">Heading goes here</div>
	<div class="panel-body">
		Here is our panel-content
	</div>
	<div class="panel-footer">Footer goes here</div>
</div>

Play with example »

Contextual panels

Sometimes we want to show panels in a specific context. I.e. when a warning is shown to the user. Bootstrap has the following classes available for us, to set a to the context corresponding color. The following classes are available:

  • panel-primary
  • panel-success
  • panel-info
  • panel-warning
  • panel-danger

You can use them by adding them to the panel-class, like in the following example.

Example

<div class="panel panel-primary">
	<!--... Panel Content ...-->
</div>

Play with example »