Boxes & Tables

Table with Predefined Colors

Table: Striped Rows

Table: Hover Rows

Contextual classes

Use contextual classes to color table rows or individual cells.

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 color="default"]
<table class="table">
    <thead>
    <tr>
        <th>Browser</th>
        <th>Version</th>
        <th>CSS Grade</th>
        <th>Platform</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>Firefox</td>
        <td>6.0.2</td>
        <td>AAA</td>
        <td>Win XP</td>
    </tr>
    <tr>
        <td>Internet Explorer</td>
        <td>8</td>
        <td>C</td>
        <td>Win Vista</td>
    </tr>
    <tr>
        <td>Chrome</td>
        <td>5</td>
        <td>BB</td>
        <td>Win 7</td>
    </tr>
    </tbody>
</table>
[/table]

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

Box with heading

Box with footer

Color versions:

Can be combined with icons

[styled_box class="" title="Styled box Default Color"]Insert the content here[/styled_box]

[styled_box] colors: Default, Primary, Success, Info, Warning, Danger, Pink Teal, Purple, Orange, Brown, Black