4 Column Grid with ‘sm’ Formatting

Text (This title is in H4 format)

In the shortcode tag, the default class within the column shortcode tag uses the “col-xs-#” format. This means the column will take on the xs styling therefore the columns will never stack responsively. To allow column stacking for responsive devices change the ‘xs’ to ‘sm’ – ex: “col-sm-3″. The ‘sm’ grid column style definition will stack the column when the screen size is a smaller device such as iphone 4 and similar smartphones.

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada varius massa sit amet fringilla.

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada varius massa sit amet fringilla. Praesent mattis felis velit, in posuere elit suscipit sed. In luctus libero tempus elementum auctor.

Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer malesuada varius massa sit amet fringilla. Praesent mattis felis velit, in posuere elit suscipit sed. In luctus libero tempus elementum auctor.


Grid with ‘xs’ (default) Formatting & Centered

Column 1

Jack
Jill

Column 2

5/20
5/20

Column 3

11:00am
1:00pm


Button Shortcode (size: normal)

Default Link Primary

Button Shortcode (size: large)

Default Link Primary

Tabs

Tab Content
Tab Content

 Tables

Optional table caption.
# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Table Code (shortcode not available for tables):

<table class="table">
<caption>Optional table caption.</caption>
<thead>
<tr>
<th>#</th>
<th>First Name</th>
<th>Last Name</th>
<th>Username</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>