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