Boxes & Tables
Table with Predefined Colors
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| Firefox | 6.0.2 | AAA | Win XP |
| Internet Explorer | 8 | C | Win Vista |
| Chrome | 5 | BB | Win 7 |
| Safari | 5 | AA | Win 7 |
Table: Striped Rows
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| Firefox | 6.0.2 | AAA | Win XP |
| Internet Explorer | 8 | C | Win Vista |
| Chrome | 5 | BB | Win 7 |
| Safari | 5 | AA | Win 7 |
Table: Hover Rows
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| Firefox | 6.0.2 | AAA | Win XP |
| Internet Explorer | 8 | C | Win Vista |
| Chrome | 5 | BB | Win 7 |
Contextual classes
Use contextual classes to color table rows or individual cells.
- .active – Applies the hover color to a particular row or cell
- .success – Indicates a successful or positive action
- .warning – Indicates a warning that might need attention
- .danger – Indicates a dangerous or potentially negative action
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| default | Col content | Col content | Col content |
| active | Col content | Col content | Col content |
| success | Col content | Col content | Col content |
| warning | Col content | Col content | Col content |
| danger | Col content | Col content | Col content |
Other table colors:
Predefined colors:
table-default, table-primary, table-success, table-warning, table-danger, table-info, table-pink, table-teal, table-orange, table-purple
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| Firefox | 6.0.2 | AAA | Win XP |
| Internet Explorer | 8 | C | Win Vista |
| Chrome | 5 | BB | Win 7 |
| Safari | 5 | AA | Win 7 |
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| Firefox | 6.0.2 | AAA | Win XP |
| Internet Explorer | 8 | C | Win Vista |
| Chrome | 5 | BB | Win 7 |
| Safari | 5 | AA | Win 7 |
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| Firefox | 6.0.2 | AAA | Win XP |
| Internet Explorer | 8 | C | Win Vista |
| Chrome | 5 | BB | Win 7 |
| Safari | 5 | AA | Win 7 |
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| Firefox | 6.0.2 | AAA | Win XP |
| Internet Explorer | 8 | C | Win Vista |
| Chrome | 5 | BB | Win 7 |
| Safari | 5 | AA | Win 7 |
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| Firefox | 6.0.2 | AAA | Win XP |
| Internet Explorer | 8 | C | Win Vista |
| Chrome | 5 | BB | Win 7 |
| Safari | 5 | AA | Win 7 |
[table class="table-danger"]
| Browser | Version | CSS Grade | Platform |
|---|---|---|---|
| Firefox | 6.0.2 | AAA | Win XP |
| Internet Explorer | 8 | C | Win Vista |
| Chrome | 5 | BB | Win 7 |
| Safari | 5 | AA | Win 7 |
Styled Boxes
While not always necessary, sometimes you need to put your CONTENT in a box. For those situations, try the Box shortcode.
Basic example
Basic panel example
Box with heading
Box Title
Box content
Box with footer
default – Box content
Color versions:
Can be combined with icons
Primary
primary – Box content
Success
success – Box content
Info
info – Box content
Warning
warning – Box content
Danger
danger – Box content
Pink
Box content
Teal
Box content
Purple
Box content
Orange
Box content
Brown
Box content
Black
Box content
[styled_box title="Black" type="sb" class="panel-black" footer=""]Box content[/styled_box]
[ styled_box] colors: Default, Primary, Success, Info, Warning, Danger, Pink Teal, Purple, Orange, Brown, Black