Adding Shortcodes within Bootstrap Grid System
In this article we will explain how you can create your own Shortcodes arrangement layout using Bootstrap.
Note:
For a more detailed explanation on this topic as well as other additional Bootstrap classes that can be used, please refer to the
Bootstrap official documentation.
Bootstrap Grid System
By default the Bootstrap grid system utilizes 12 columns. This grid adapts based on the Bootstrap classes you assign to the containers and the actual layout is created from a mixture of .row classes and .span* classes.
Being a 12-column grid, all spans of a given row should always add up to 12. Example for 3 fluid columns:
<div class="row-fluid">
<div class="span4">[full Shortcode syntax here]</div>
<div class="span4">[full Shortcode syntax here]</div>
<div class="span4">[full Shortcode syntax here]</div>
</div>
Explanation:
Notice span classes, 4 + 4 + 4 = 12 (standard Bootstrap 12-column).
The .row-fluid class was used to display a fluid grid system that uses percentages instead of pixels for column widths.
"[full Shortcode syntax here]" will actually be your Shortcode.
One person found this article helpful.
