20 #Panels Panels extended

panel, panel-heading, panel-body, panel-footer

A small panel of content. Muliple panels can be stacked one after the other

Example
Panel heading
Panel content here.
Optional panel footer
<div class="panel">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    Panel content here.
  </div>
  <div class="panel-footer">Optional panel footer</div>
</div>

20 #Panels Panels extended

panel, panel-heading, panel-body

A small panel of content. Muliple panels can be stacked one after the other

Example
Panel heading
Panel content here.
Optional panel footer
<div class="panel">
  <div class="panel-heading">Panel heading</div>
  <div class="panel-body">
    Panel content here.
  </div>
  <div class="panel-footer">Optional panel footer</div>
</div>

20.1 #Panels.Collapsible Collapsible extended

A panel where the body can be collapsed by clicking the header. Add/remove is-collapsed to open and close the panel.

Example
Body is visible 
<div class="panel panel-collapsible">
  <button class="panel-heading">Non-collapsed panel</button>
  <div class="panel-body">
    Body is visible
  </div>
</div>
<div class="panel panel-collapsible is-collapsed">
  <button class="panel-heading">Collapsed panel</button>
  <div class="panel-body">
    Body is not visible
  </div>
</div>
Example
Body contents here
Show Markup
<div class="panel panel-collapsible">
  <button class="panel-heading">
    Panel heading
    <span class="panel-aside">(1 item selected)</span>
  </button>
  <div class="panel-body">
    Body contents here
  </div>
</div>