Adding Shortcodes within Bootstrap Grid System

In this article we will explain how you can create your own Shortcodes arrangement layout using Bootstrap 2.3.2 and Bootstrap 4.

Bootstrap 2.3.2 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>

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 5 Grid System

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content. It’s built with flexbox and is fully responsive. Below is an example and for how the grid system comes together.

Being a 12-column grid, all cols of a given row should always add up to 12. Example for 3 fluid columns:

    <div class="container">
      <div class="row">
      <div class="col">
        [full Shortcode syntax here]
      </div>
      <div class="col">
        [full Shortcode syntax here]
      </div>
      <div class="col">
        [full Shortcode syntax here]
      </div>
      </div>
    </div>

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.