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:
<div class="panel panel-default"> <div class="panel-body"> Here is our panel-content </div> </div>
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.
<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>
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:
You can use them by adding them to the panel-class, like in the following example.
<div class="panel panel-primary"> <!--... Panel Content ...--> </div>