You are here

Create Bootstrap Columns in the Body Content Area

This little layout below has started increasing in popularity as of late.

Column

These columns were created within the main body content. This could be done on any page to achieve a multi-column layout.

Column 2

You can use the Bootstrap 'row-fluid' and 'spanx' classes to get a 2, 3, or 4 column layout.

Column 3

For now this requires typing in the HTML

Column 4

These columns were created within the main body content. This could be done on any page to achieve a multi-column layout.

And here's the code that makes it happen:

Please keep in mind that this works only with Doug Fir, which utilizes Twitter Bootstrap. If you put it into OSU Standard it will not make columns until you switch to Doug Fir.

HTML to create a four column layout in the content area using the Doug Fir theme with the OSU Pine theme variant

<div class="row-fluid">
<div class="span3">
<h4>Column 1</h4>
<p>These columns were created within the main body content. This
could be done on any page to achieve a multi-column layout.</p>
</div>
<div class="span3">
<h4>Column 2</h4>
<p>You can use the Bootstrap 'row-fluid' and 'spanx' classes to get a
2, 3, or 4 column layout.</p>
</div>
<div class="span3">
<h4>Column 3</h4>
<p>For now this requires typing in the HTML</p>
</div>
<div class="span3">
<h4>Column 4</h4>
<p>These columns were created within the main body content. This
could be done on any page to achieve a multi-column layout.</p>
</div>
</div>

Another note on the 12 point grid system: the "span" numbers must add to -you guessed it- 12.

Would make a 2 column layout, with one content taking 66.6% (span8) and the other taking 33.3% (span4). So you could do span6, span6 (for equal 2 columns). span4 span4 span4 (3 column, equal sizes) etc.

Again, it's a 12 point grid, as long as the numbers inside the row-fluid div add up to 12 you can create the columns you want, with the desired widths.