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

Learn More

Behind the scene

Build this {docfile}
[https://raw.github.com/llaville/asciidoc-bootstrap-backend/v4/docs/panels.asciidoc]

See
[http://asciidoc.org/userguide.html#X60]
 for docfile attribute.

with :

html5 backend 
$ asciidoc.py
  -b html5
  -a linkcss
  -a stylesdir=./stylesheets
  -a scriptsdir=./javascripts
  {docfile}
You will have tons of WARNING because AsciiDoc does not support the panel-style open block. But the result is not so bad. Check yourself: select the AsciiDoc entry in Themes menu.
asciidoc: WARNING: panels.asciidoc: line 40: missing style: [blockdef-open]: panel
asciidoc: WARNING: panels.asciidoc: line 78: missing style: [blockdef-open]: panel
asciidoc: WARNING: panels.asciidoc: line 116: missing style: [blockdef-open]: panel
asciidoc: WARNING: panels.asciidoc: line 151: missing style: [blockdef-open]: panel
asciidoc: WARNING: panels.asciidoc: line 186: missing style: [blockdef-open]: panel
asciidoc: WARNING: panels.asciidoc: line 221: missing style: [blockdef-open]: panel
asciidoc: WARNING: panels.asciidoc: line 256: missing style: [blockdef-open]: panel
bootstrap backend 
$ asciidoc.py
  -b bootstrap
  -a linkcss
  -a stylesdir=./stylesheets
  -a scriptsdir=./javascripts
  -a theme=flatly
  -a navbar=fixed
  -a totop
  {docfile}
You will have a WARNING because the theme used (e.g. flatly) is a Bootswatch theme, and not a AsciiDoc Theme.
asciidoc: WARNING: missing theme: flatly