Panels
While not always necessary, sometimes you need to put your DOM in a box. For those situations, try the panel component.
Basic design
By default, all the .panel
does is apply some basic border and padding to contain some content.
<div class="panel">
<div class="panel-body">
Basic panel example
</div>
</div>
Options
Panel with heading
Easily add a heading container to your panel with .panel-heading
. You may also include any <h1>
-<h6>
with a .panel-title
class to add a pre-styled heading.
Panel title
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
<div class="panel-body">
Basic content
</div>
</div>
Panel with footer
Wrap buttons or secondary text in .panel-footer
.
Panel with tables
To take advantage of full width palce the table
directly under the .panel
wraper and not in .panel-body
.
Panel title
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
# | First Name | Last Name | Username |
---|---|---|---|
1 | Mark | Otto | @mdo |
2 | Jacob | Thornton | @tho |
3 | Larry | the Bird |
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
// Default panel contents
<div class="panel-body">
<p>Some default panel content here.</p>
</div>
// Table
<table class="table">
Table content
...
</table>
</div>
Panel with list groups
Include full-width list groups within any panel.
Panel title
Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
- Vestibulum at eros
<div class="panel">
<div class="panel-heading">
<h3 class="panel-title">
Panel title
</h3>
</div>
// Default panel contents
<div class="panel-body">
<p>Some default panel content here.</p>
</div>
// List group
<ul class="list-group">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Morbi leo risus</li>
<li class="list-group-item">Vestibulum at eros</li>
...
</ul>
</div>