Twitter Bootstrap
In addition to the Lawrence-specific extras listed below, particularly adventurous users can find additional markup classes in the Twitter Bootstrap documention for "Bootstrap CSS." A frequently-used example is adding the Bootstrap table-striped
class to tables in order to add alternating styles to even/odd table rows, or pull-left
to move highlight boxes to the left-hand side of the page.
Multi-Column Layouts Within Nodes
Another commonly used feature of Bootstrap is for multi-column layouts using the Fluid Grid System. These columns nicely fall into a single column layout on small devices like phones. Below we've included the 2 most common examples (2-column and 3-column equal layouts); use the "Source" tab to paste the code to start, then click "Source" again and edit the column contents. You can modify them by changing the column width classes (col-md-N
) - remember that the total widths of all columns must equal 12 (so a half-width column would be col-md-6
). Refer to the previous Bootstrap documentation link for more information.
2-Column, Equal Width
Example:
Markup (to be pasted under Source):
<div class="container-fluid">
<div class="row">
<div class="col-md-6">First column</div>
<div class="col-md-6">Second column</div>
</div>
</div>
3-Column, Equal Width
Example:
Markup (to be pasted under Source):
<div class="container-fluid">
<div class="row">
<div class="col-md-4">First column</div>
<div class="col-md-4">Second column</div>
<div class="col-md-4">Third column</div>
</div>
</div>