Advanced Columns Snippet

Please Read Before Using this Snippet

This is an Advanced Snippet: This snippet uses the Bootstrap 4 Grid to create responsive column layouts. Experience with HTML and the class attribute is recommended as well as familiarity with 12 column grid systems. If you are unsure about working with class names and grids, use the Two Column Offset Snippet or Equal-Width Column Snippets instead.

Similar to the other column snippets, this snippet allows you to create responsive columns that stack on mobile devices. This snippet however requires some more knowledge to use and customize. Unlike other snippets, options will not be presented to you in the snippet. You will be responsible for entering the correct combinations of classes to achieve the desired layout.

Columns are added in rows to the snippet table instead a pre-determined number of table columns and can be added or removed by modifying the rows in the table. Customize the width of every column in the left column using column class names and any modifying classes. Using this snippet requires an understanding of the Bootstrap Framework 12 Column Grid.

Bootstrap Grid Docs

Required reading before working with this snippet.

Snippet Options

ROW CLASS

The HTML class attribute of the parent container. Most commonly "row" only, but other classes can be added to this modify your columns alignment and justification, or use the flex utilities instead. Some common modifiers:

Snippet Columns

Column Class

The classe(s) you will use to define the width of the column at the breakpoint you choose. These are applied to the containers nested inside of the parent container. Column classes start with col- and are seperated by a space as they are in HTML. Do not include a dot or period before the class names.

Bootstrap compatible HTML class names only, additional text or nested content may cause display issues.

About Column Classes

Column Content

The content that will be displayed inside of the column.

WYSIWYG content, nested snippets, components, and assets allowed.

Examples

Basic Responsive Columns

This example creates 3 even width columns on SM size screens and above (col-sm-4). The columns switch to 100% width on mobile (col-12).

Column 1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Column 2

Column 3

View Snippet Table

Advanced Columns Snippet
Options
ROW CLASS	row
Columns
Column Class	Column Content
col-12 col-sm-4	Column 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
col col-sm-4	Column 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
col col-sm-4	Column 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Varying Width Columns & Breakpoints

This example creates 3 even width columns on SM size screens and above (col-sm-4) like before, however on MD screens the middle column becomes wider than the other two (col-sm-3 + col-md-6 + col-sm-3). All columns switch to 100% width on mobile (col-12).

Column 1

Column 2

Column 3

View Snippet Table

Advanced Columns Snippet
ROW CLASS	row
Column Class	Column Content
col-12 col-sm-4 col-md-3	Column 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
col-12 col-sm-4 col-md-6	Column 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
col-12 col-sm-4 col-md-3	Column 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Row Modifiers

This example is the same as the previous varying width example, however it uses an additional class, align-items-center, in the ROW CLASS area to vertically align the columns.

Column 1

Column 2

Column 3

View Snippet Table

Advanced Columns Snippet
ROW CLASS	row
Column Class	Column Content
col-12 col-sm-4 col-md-3	Column 1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
col-12 col-sm-4 col-md-6	Column 2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
col-12 col-sm-4 col-md-3	Column 3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Need Assistance?

The WKU ITS Service Desk is here to help. Give us a call, chat with a representative online, use the Self-Help Knowledge Base and more.

Get Help

Some of the links on this page may require additional software to view.

Download Acrobat Reader Download Quicktime