Chapter 9. Panels Bootstrap Component

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

9.1. 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 9.1. Panel without heading

Basic panel example


9.2. 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 9.2. Panel with heading

Panel content


9.3. 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 9.3. Panel with primary contextual state class

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 9.4. Panel with success contextual state class

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 9.5. Panel with info contextual state class

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 9.6. Panel with warning contextual state class

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 9.7. Panel with danger contextual state class

Panel content


9.4. Learn More