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.
Html Code
<div class="panel panel-default"> <div class="panel-body"> Basic panel example </div> </div>
AsciiDoc Code
[panel] -- Basic panel example --
Example 1. Panel without heading
Basic panel example
Panel with heading
Easily add a heading container to your panel with .panel-heading
Html Code
<div class="panel panel-default"> <div class="panel-heading"> Panel title </div> <div class="panel-body"> Panel content </div> </div>
AsciiDoc Code
[panel] .Panel title -- Panel content --
Example 2. Panel with heading
Panel title
Panel content
Contextual alternatives
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Html Code
<div class="panel panel-primary"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
AsciiDoc Code
[panel,primary] .Panel title -- Panel content --
Example 3. Panel with primary contextual state class
Panel title
Panel content
Html Code
<div class="panel panel-success"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
AsciiDoc Code
[panel,success] .Panel title -- Panel content --
Example 4. Panel with success contextual state class
Panel title
Panel content
Html Code
<div class="panel panel-info"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
AsciiDoc Code
[panel,info] .Panel title -- Panel content --
Example 5. Panel with info contextual state class
Panel title
Panel content
Html Code
<div class="panel panel-warning"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
AsciiDoc Code
[panel,warning] .Panel title -- Panel content --
Example 6. Panel with warning contextual state class
Panel title
Panel content
Html Code
<div class="panel panel-danger"> <div class="panel-heading"> <h3 class="panel-title">Panel title</h3> </div> <div class="panel-body"> Panel content </div> </div>
AsciiDoc Code
[panel,danger] .Panel title -- Panel content --
Example 7. Panel with danger contextual state class
Panel title
Panel content