Versions Compared

Old Version 2

changes.mady.by.user Sherral Trotter

Saved on

compared with

New Version 3

changes.mady.by.user Sherral Trotter

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

  • .col-xs-12: Spans 12 columns (full width) on extra-small screens (phones).

    Image Added

  • .col-sm-6: Spans 6 columns (half width) on small screens (tablets).

    Image Added

  • .col-md-4: Spans 4 columns (one-third width) on medium screens (desktops).

    Image Added

  • .col-lg-3: Spans 3 columns (one-fourth width) on large screens (larger desktops).

    Image Added

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

    Image Added

Example:

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

  <!-- Content goes here -->

</div>

...

Code Block
languagehtml
<div class="container">
   <div class="row">
     <div class="col-sm-6">
       <strong>One of two columns</strong>

      <p>Content goes here.</p>

    </div>

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

      <strong>Two of two columns</strong>

      <p>Content goes here.</p>
     </div>
   </div>

</div>

...

Creating a Three-Column Row

...

Code Block
languagehtml
<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

...

Code Block
languagehtml
<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.

...