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.
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.
For proper link coloring, be sure to place links in headings within .panel-title.
Panel with footer
Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.
Same height
Use the class .same-height to give all cols and panels inside a .row the same height.
Panel heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus sem, euismod feugiat malesuada in, semper sed nunc. Donec condimentum, nulla ultricies venenatis vestibulum, elit ipsum fermentum arcu, sed facilisis ipsum purus vitae ante.
Panel heading
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi lectus sem, euismod.
Panel heading
Feugiat condimentum quam cursus. Ut eget urna ut nibh maximus egestas. Pellentesque ultrices, nisl vitae tincidunt malesuada, neque libero condimentum eros.
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
.panel .panel-primary
Panel title
.panel .panel-success
Panel title
.panel .panel-info
Panel title
.panel .panel-warning
Panel title
.panel .panel-danger
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.
Panel heading
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 |
With list groups
Easily include full-width list groups within any panel.
Panel heading
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
Special Panels and Icons
Add some icons and special funcionality to your panels.
Panel title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed convallis urna. Fusce id leo sit amet felis vestibulum sodales. Sed dapibus convallis elit at pretium. Curabitur luctus placerat magna id scelerisque
Panel title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed convallis urna. Fusce id leo sit amet felis vestibulum sodales. Sed dapibus convallis elit at pretium. Curabitur luctus placerat magna id scelerisque
Panel title
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed convallis urna. Fusce id leo sit amet felis vestibulum sodales. Sed dapibus convallis elit at pretium. Curabitur luctus placerat magna id scelerisque
.bordered-panel .bordered-primary
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed convallis urna. Fusce id leo sit amet felis vestibulum sodales. Sed dapibus convallis elit at pretium. Curabitur luctus placerat magna id scelerisque
.bordered-panel .bordered-success
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed convallis urna. Fusce id leo sit amet felis vestibulum sodales. Sed dapibus convallis elit at pretium. Curabitur luctus placerat magna id scelerisque
.bordered-panel .bordered-info
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed convallis urna. Fusce id leo sit amet felis vestibulum sodales. Sed dapibus convallis elit at pretium. Curabitur luctus placerat magna id scelerisque
.bordered-panel .bordered-warning
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed convallis urna. Fusce id leo sit amet felis vestibulum sodales. Sed dapibus convallis elit at pretium. Curabitur luctus placerat magna id scelerisque
.bordered-panel .bordered-danger
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla sed convallis urna. Fusce id leo sit amet felis vestibulum sodales. Sed dapibus convallis elit at pretium. Curabitur luctus placerat magna id scelerisque