Tables & Boxes
Table with Predefined Colors
[table class= »table-default »]
| 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]
Table: Striped Rows
[table class= »table-teal table-striped »]
| 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]
Table: Hover Rows
[table class= »table-primary table-hover »]
| 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]
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
[table class= »table-info »]
| 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 |
[/table]
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
[table class= »table-success »]
| 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]
[table class= »table-warning »]
| 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]
[table class= »table-orange »]
| 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]
[table class= »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 |
[/table]
[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]
[code]
[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]
[/code]
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
[styled_box title= » » footer= » » class= »panel-default »]Basic panel example[/styled_box]
Box with heading
[styled_box title= »Box Title » footer= » » class= »panel-default »]Box content[/styled_box]
Box with footer
[styled_box title= » » footer= »default » class= »panel-default »]default – Box content[/styled_box]
Color versions:
Can be combined with icons
[styled_box title= »Primary » icon= »icon-home » footer= » » class= »panel-primary »]primary – Box content[/styled_box]
[styled_box title= »success » icon= »icon-thumbs-up » footer= » » class= »panel-success »]success – Box content[/styled_box]
[styled_box title= »info » icon= »icon-info-sign » footer= » » class= »panel-info »]info – Box content[/styled_box]
[styled_box title= »warning » icon= » » footer= » » class= »panel-warning »]warning – Box content[/styled_box]
[styled_box title= »danger » icon= » » footer= » » class= »panel-danger »]danger – Box content[/styled_box]
[styled_box title= »pink » icon= » » footer= » » class= »panel-pink »]Box content[/styled_box]
[styled_box title= »teal » icon= » » footer= » » class= »panel-teal »]Box content[/styled_box]
[styled_box title= »purple » icon= » » footer= » » class= »panel-purple »]Box content[/styled_box]
[styled_box title= »orange » icon= » » footer= » » class= »panel-orange »]Box content[/styled_box]
[styled_box title= »brown » icon= » » footer= » » class= »panel-brown »]Box content[/styled_box]
[styled_box title= »black » icon= » » footer= » » class= »panel-black »]Box content[/styled_box]
[code]
[styled_box title= »orange » icon= » » footer= » » class= »panel-orange »]Box content[/styled_box]
[/code]
[styled _box] colors: orange (default), pink, brown, violet, turquoise, green, blue, dark, purple, brown, cyan
