# Panels Bootstrap Component

http://getbootstrap.com/components/#panels

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/master/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