Boxes & Tables

[title type=”h1″ class=””]Shortcodes: Boxes & Tables[/title]

[title type=”h3″ class=””]Table with Predefined Colors[/title]
[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]

[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-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]

[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”]Basic panel example[/styled_box]

[title type=”h3″ class=””]Box with heading[/title]
[styled_box title=”Box Title” type=”sb” class=”panel-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-primary”]primary – Box content[/styled_box]

[styled_box title=”Success” type=”sb” class=”panel-success”]success – Box content[/styled_box]

[styled_box title=”Info” type=”sb” class=”panel-info”]info – Box content[/styled_box]

[styled_box title=”Warning” type=”sb” class=”panel-warning”]warning – Box content[/styled_box]

[styled_box title=”Danger” type=”sb” class=”panel-danger”]danger – Box content[/styled_box]

[styled_box title=”Pink” type=”sb” class=”panel-pink”]Box content[/styled_box]

[styled_box title=”Teal” type=”sb” class=”panel-teal”]Box content[/styled_box]

[styled_box title=”Purple” type=”sb” class=”panel-purple”]Box content[/styled_box]

[styled_box title=”Orange” type=”sb” class=”panel-orange”]Box content[/styled_box]

[styled_box title=”Brown” type=”sb” class=”panel-brown”]Box content[/styled_box]

[styled_box title=”Black” type=”sb” class=”panel-black”]Box content[/styled_box]

[code]
[styled_box title=”Black” type=”sb” class=”panel-black”]Box content[/styled_box]
[/code]

[ styled_box] colors: orange (default), pink, brown, violet, turquoise, green, blue, dark, purple, brown, cyan