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 PrimaryButton Shortcode (size: large)
Default Link PrimaryTabs
Tables
| # | First Name | Last Name | Username |
|---|---|---|---|
| 1 | Mark | Otto | @mdo |
| 2 | Jacob | Thornton | @fat |
| 3 | Larry | the Bird |
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>