[title type=”h3″ class=””]Table with Predefined Colors[/title]
[table class=””]
| 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]
[title type=”h3″ class=””]Table: Striped Rows[/title]
[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]
[title type=”h3″ class=””]Table: Hover Rows[/title]
[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 |
[/table]
[title type=”h3″ class=””]Contextual classes[/title]
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]
[title type=”h3″ class=””]Other table colors:[/title]
Predefined colors:
table-default, table-primary, table-success, table-warning, table-danger, table-info, table-pink, table-teal, table-orange, table-purple
[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]
[title type=”h2″ class=””]Styled Boxes[/title]
While not always necessary, sometimes you need to put your CONTENT in a box. For those situations, try the Box shortcode.
[title type=”h3″ class=””]Basic example[/title]
[styled_box title=”” type=”sb” class=”panel-default” footer=””] Basic panel example[/styled_box]
[title type=”h3″ class=””]Box with heading[/title]
[styled_box title=”Box Title” type=”sb” class=”panel-default” footer=””]Box content[/styled_box]
[title type=”h3″ class=””]Box with footer[/title]
[styled_box title=”” type=”sb” class=”panel-default” footer=”default”]default – Box content[/styled_box]
[title type=”h3″ class=””]Color versions:[/title]
Can be combined with icons
[styled_box title=”Primary” type=”sb” class=”panel-default” footer=””]primary – Box content[/styled_box]
[styled_box title=”Success” type=”sb” class=”panel-success” footer=””]success – Box content[/styled_box]
[styled_box title=”Info” type=”sb” class=”panel-info” footer=””]info – Box content[/styled_box]
[styled_box title=”Warning” type=”sb” class=”panel-warning” footer=””]warning – Box content[/styled_box]
[styled_box title=”Danger” type=”sb” class=”panel-danger” footer=””]danger – Box content[/styled_box]
[styled_box title=”Pink” type=”sb” class=”panel-pink” footer=””]Box content[/styled_box]
[styled_box title=”Teal” type=”sb” class=”panel-teal” footer=””]Box content[/styled_box]
[styled_box title=”Purple” type=”sb” class=”panel-purple” footer=””]Box content[/styled_box]
[styled_box title=”Orange” type=”sb” class=”panel-orange” footer=””]Box content[/styled_box]
[styled_box title=”Brown” type=”sb” class=”panel-brown” footer=””]Box content[/styled_box]
[styled_box title=”Black” type=”sb” class=”panel-black” footer=””]Box content[/styled_box]
[code]
[styled_box title=”Black” type=”sb” class=”panel-black” footer=””]Box content[/styled_box]
[/code]
[ styled_box] colors: Default, Primary, Success, Info, Warning, Danger, Pink Teal, Purple, Orange, Brown, Black