By default, all the .panel does is apply some basic border and padding to contain some content.
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
Panel with footer
Wrap buttons or secondary text in .panel-footer. Note that panel
footers do not inherit colours and borders when using contextual variations
as they are not meant to be in the foreground.
Contextual alternatives
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
Panel title A link
Panel title A link
Panel title A link
Panel title A link
Panel title A link
Panel title A link
With tables
Add any non-bordered .table within a panel for a seamless design.
If there is a .panel-body, we add an extra border to the top of the table
for separation.
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 | @fat |
| 3 | Larry | the Bird |
If there is no panel body, the component moves from panel header to table without interruption.
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |