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.

5 persons found this article helpful.

Was this article helpful?

Yes No
Sorry about that

You Should Also Read

Carousel

Tabs

Accordion

Box