Panels
Here is a demo of the panels collection with variant colors, layouts and styles
Colors
Panel Default
Add class="panel panel-default" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far, so let us know what you think.
Panel Primary
Add class="panel panel-primary" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far, so let us know what you think.
Panel Info
Add class="panel panel-info" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far, so let us know what you think.
Panel Success
Add class="panel panel-success" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far, so let us know what you think.
Panel Warning
Add class="panel panel-warning" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far, so let us know what you think.
Panel Danger
Add class="panel panel-danger" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far, so let us know what you think.
Panel Pink
Add class="panel panel-pink" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far, so let us know what you think.
Panel Purple
Add class="panel panel-purple" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far, so let us know what you think.
Panel Inverse
Add class="panel panel-inverse" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far, so let us know what you think.
Outlined
Panel Default
Add class="panel panel-custom panel-default" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far.
Panel Primary
Add class="panel panel-custom panel-primary" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far.
Panel Info
Add class="panel panel-custom panel-info" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far.
Panel success
Add class="panel panel-custom panel-success" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far.
Panel Warning
Add class="panel panel-custom panel-warning" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far.
Panel Danger
Add class="panel panel-custom panel-danger" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far.
Panel Pink
Add class="panel panel-custom panel-pink" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far.
Panel purple
Add class="panel panel-custom panel-purple" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far.
Panel inverse
Add class="panel panel-custom panel-inverse" That’s a big claim, does it really work? Yes it does and has been given 5 out of 5 stars on all the reviews we’ve seen so far.
Layouts
Use <div class="panel-footer"></div> 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.
header & footer
Use <div class="panel-heading"></div> to apply heading and use <div class="panel-heading"></div> to apply the footer and you can use any ui element in the footer
Panels with tables & list-groups
With table
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.
| # | 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.
- Cras justo odio
- Dapibus ac facilisis in
- Morbi leo risus
- Porta ac consectetur ac
Panel With table
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
