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