When you want to place a group of elements into a box, try using panels & widget boxes.
Easily add a heading container to your panel with .panel-heading. You may also include any <h1>-<h6>with a .panel-titleclass to add a pre-styled heading. However, the font sizes of <h1>-<h6>are overridden by .panel-heading.
For proper link coloring, be sure to place links in headings within .panel-title.
Wrap buttons or secondary text in .panel-footer. Note that panel footers do notinherit colors and borders when using contextual variations as they are not meant to be in the foreground.
Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.
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 |
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.
Widget Boxes are similar to panels, but have different padding and housing which is better suited to widget-style content. It also has a larger shaded-top border.
Easily add a header container to your widget with .widget-header. Unlike panels, Widget Headers (not headings) are consistent so that the user begins to easily associate the sizing with a widget-style element.
You can include a set of actions within any widget using .widget-header-actions. This allows you to add close, configuration or any other times of buttons.
Widget boxes have just as many contextual alternatives as panels. Unlike a panel, however, the entire widget box changes colour to suit the context. This is so that all information is presented in the specified context, not just the header.
If there is no widget body, the table still seats nicely in the widget box.