Creating Bootstrap Columns

Learn to create responsive layouts using Bootstrap 3 grid system. By following this step-by-step guide, you’ll be able to edit your Cascade page and set up Bootstrap rows and columns via the WYSIWYG source code editor.

Table of Contents

\uD83D\uDCD8 Instructions

Access the Source Code Editor in the WYSIWYG

1. Log in to Cascade CMS and navigate to your site page.

2. Click on the Edit button to open the page in edit mode.

3. Locate the content row containing the Feature Text content type that you want to modify.

4. In the WYSIWYG editor, click on the <> icon to open the Source Code editor.

Understanding the Bootstrap Grid System

1. .container: This class creates a responsive, fixed-width container that centers the content within the viewport. A container is necessary to hold rows and columns.

2. .row: This class is used to create a horizontal block that contains columns. Rows should always be placed inside a container.

3. Column classes: Columns are defined using a combination of class prefixes and numbers to represent the desired screen size and the number of columns the content should span. There are four class prefixes: col-xs-, col-sm-, col-md-, and col-lg-. The number following the prefix (1-12) represents the number of columns the content should occupy.

Grid System Examples:

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

  

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

  

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

  

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

  

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

  

In the code snippet example below, using the class “class="col-xs-12 col-sm-6 col-md-4 col-lg-3“, the content will span the entire width on extra-small screens, half the width on small screens, one-third of the width on medium screens, and one-fourth of the width on large screens.

Code Snippet Example:

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

  <!-- Content goes here -->

</div>

Creating a Simple Two-Column Row

To create a two-column row, use the "col-sm-6" class, which divides the row into two equal-width columns. The content will span half the width on small screens (tablets) and retain this layout on medium and large screens as well.

Code Snippet Example:

<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

To create a three-column row, use the "col-sm-4" class, which divides the row into three equal-width columns. The content will span one-third of the width on small screens (tablets) and retain this layout on medium and large screens.

Code Snippet Example:

<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, use the "col-sm-3" class, which divides the row into four equal-width columns. The content will span one-fourth of the width on small screens (tablets) and retain this layout on medium and large screens as well.

Code Snippet Example:

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

\uD83D\uDCCB Related articles

• Page:
  Preventing Publishing or Unmarking Content for Publish
• Page:
  Migrating Content
• Page:
  Enabling Siteimprove Integration
• Page:
  Run an Accessibility Scan of a Single Page in Siteimprove
• Page:
  Types of Links