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 |
| Safari |
5 |
AA |
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, table-brown, table-black
| 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 |
[/table]
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
Box with heading
Box with footer
Color versions:
Can be combined with icons
Primary
primary – Box content
success
success – Box content
warning
warning – Box content
danger
danger – Box content
[styled_box title="orange" icon="" footer="" class="panel-orange"]Box content[/styled_box]
[styled _box] colors: orange (default), pink, brown, violet, turquoise, green, blue, dark, purple, brown, cyan