Eugene Kopyov
Jason Goldsmith
Angel Novator
Monica Bloomberg
Patrick Winsleur
Ukrainian
English
Spanish
HungarianPanel options
Page contains examples of elements, which can be used in panel headings - labels, badges, buttons, button groups, icons, progress bars etc. Including combinations of panel and inner components.
Default panel
div class="panel-heading"Panel with left spinner
div class="head"Panel heading with button
Buttondiv class="head"Panel with label
Labeldiv class="head"Panel with icon
div class="head"Panel with right spinner
div class="head"Panel with button group
div class="head"Panel with badge
893div class="head"Panel with icon group
div class="head"Panel with controls
div class="head"Default panel
div class="panel panel-default"
Danger panel
div class="panel panel-danger"
Info panel
div class="panel panel-info"
Nesting panels
Default panel
div class="panel panel-default"
Nesting panels
Success panel
div class="panel panel-success"
With table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
With table & panel body
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 group
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
With linked items
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.