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
Log in to Cascade CMS and navigate to your site page.
Click on the Edit button to open the page in edit mode.
Locate the content row containing the Feature Text content type that you want to modify.
In the WYSIWYG editor, click on the <> icon to open the Source Code editor.
Understanding the Bootstrap Grid System
.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.
.row: This class is used to create a horizontal block that contains columns. Rows should always be placed inside a container.
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.
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.
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, we will use the "col-sm-6" class, which divides the row into two equal-width columns.
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, we will use the "col-sm-4" class, which divides the row into three equal-width columns.
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, we will use the "col-sm-3" class, which divides the row into four equal-width columns.
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>
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.