We just updated our WordPress Twitter Bootstrap Plugin and want to write a little about recent shortcode additions and their functionality.
More specifically, Twitter Bootstrap “rows” and “spans” and “containers”.
WordPress Shortcode for Twitter Bootstrap SPANs – a quick explanation of the span
A Bootstrap span is simply a div with class: span# where ‘#’ is a number between 1 and 12
Assuming you use default Bootstrap CSS dimensions, the horizontal space taken up by a span of ‘n’ units is equal to: n x 100px
So, span1 is 100px: (70px div) + (30px margin).
Another example. ‘span7‘ is 700px: (670px div) + (30px margin).
This should help work out how much span you need cater for a certain width.
Then there’s the offset class. Much like span, you specify the size of the indentation (left-margin), where the size of this margin is calculated exactly like that on the span.
How to use the SPAN shortcode
[TBS_SPAN size="5" offset="3"]My Nice Bootstrap Span[/TBS_SPAN]
will print the following HTML for you:
<div class="span5 offset3">My Nice Bootstrap Span</div>
WordPress Shortcode for Twitter Bootstrap ROWs
Your best bet when using spans is to place them within Bootstrap rows. A Bootstrap ‘row’ is, again, simply a div with class: ‘row’.
A row has a fix-width (by default) of 1200px. This allows your 12 spans of (100px) to fit in quite nicely – not a coincidence 😉
A row doesn’t have to 1200px and can change depending on the width of the viewing screen. To achieve this you assign it the class “row-fluid“.
The WordPress Twitter Bootstrap plugin supports both formats and here is how you use them:
[TBS_ROW] [TBS_SPAN size="5"]My Nice Bootstrap Span[/TBS_SPAN] [/TBS_ROW]
will print the following HTML:
<div class="row"><div class="span5">My Nice Bootstrap Span</div></div>
while the following…
[TBS_ROW fluid='y'] [TBS_SPAN size="5"]My Nice Bootstrap Span[/TBS_SPAN] [/TBS_ROW]
will print a fluid row:
<div class="row-fluid"><div class="span5">My Nice Bootstrap Span</div></div>
Bootstrap ‘container’ shortcode option
The Bootstrap row shortcode (TBS_ROW) has one other important parameter: container
If you want to wrap up your row(s) in a bootstrap container div, simply pass the parameter: container=’y’
This will wrap your rows with the HTML: <div class="container"> ...row(s)... </div>
If you also add fluid='y' then the container class will be container-fluid instead.
Question, suggestions and feedback?
We hope that explains how to make full use of the WordPress Shortcodes provided in the WordPress Twitter Bootstrap plugin.
Of course, all shortcodes described here, and that already exist can be customized with the 3 parameters: id, class, and style.
For more information on the plugin and other documentation, check out the WordPress Twitter Bootstrap plugin’s home page.
Demo From Comments Question below:
[TBS_ROW]
[TBS_SPAN size=”6″]
Text Here
[/TBS_SPAN]
[TBS_SPAN size=”6″]
And Text Here
[/TBS_SPAN]
[/TBS_ROW]