Page Comparison

...

These classes can be combined to create more dynamic and flexible layouts.

Example:

Code Block

language	html

<div class="col-xs-12 col-sm-6 col-md-4 col-lg-3">

  <!-- Content goes here -->

</div>

...

Code Block

language	html

<div class="container">

  <div class="row">

    <div class="col-sm-4">

      <strong>One of three columns</strong>

      <p>Content goes here.</p>

  </div>

  <div class="col-sm-4">

    <strong>Two of three columns</strong>

    <p>Content goes here.</p>

  </div>

  <div class="col-sm-4">

    <strong>Three of three columns</strong>

    <p>Content goes here.</p>

    </div>

  </div>

</div>

Creating a Four-Column Row

To create a four-column row, we will use the "col-sm-3" class, which divides the row into four equal-width columns.

Example:

Code Block

language	html

<div class="container">

  <div class="row">

    <div class="col-sm-3">

      <strong>One of four columns</strong>

      <p>Content goes here.</p>

    </div>

    <div class="col-sm-3">

     <strong>Two of four columns</strong>

      <p>Content goes here.</p>

    </div>

    <div class="col-sm-3">

     <strong>Three of four columns</strong>

      <p>Content goes here.</p>

    </div>

    <div class="col-sm-3">

      <strong>Four of four columns</strong>

      <p>Content goes here.</p>

      </div>

    </div>

  </div>

Info
You have now learned how to custom code Bootstrap 3 rows and columns in Cascade CMS using different column classes for various screen sizes. This knowledge will enable you to create responsive and dynamic layouts for your Cascade CMS pages.

...

Versions Compared

Old Version 1

New Version 2

Key

Creating a Four-Column Row