Facebook Pixel Advanced Columns Snippet | Western Kentucky University Skip to main content

Advanced Columns Snippet


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

 

Available Settings

ROW CLASS
The class 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. 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.

Example

Column Content
The content of the column. Full content is allowed in this area, including other snippets.

 

 


 

 

Example #1  - 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

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Space monkey endangered spider exotic zoo. Exotic zoo spider rainforest. Capuchin howler endangered. Howler funny monkeys space monkey primate. Monkey spider baby. Zoo banana baby. Monkey exotic exotic banana. Banana arboreal. Zoo funny monkeys.

Column 2

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Space monkey endangered spider exotic zoo. Exotic zoo spider rainforest. Capuchin howler endangered. Howler funny monkeys space monkey primate. Monkey spider baby. Zoo banana baby. Monkey exotic exotic banana. Banana arboreal. Zoo funny monkeys.

Column 3

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Space monkey endangered spider exotic zoo. Exotic zoo spider rainforest. Capuchin howler endangered. Howler funny monkeys space monkey primate. Monkey spider baby. Zoo banana baby. Monkey exotic exotic banana. Banana arboreal. Zoo funny monkeys.

 

Advanced Columns Snippet
ROW CLASS row
Column Class Column Content
col-12 col-sm-4

Column 1

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Space monkey endangered spider exotic zoo. Exotic zoo spider rainforest. Capuchin howler endangered. Howler funny monkeys space monkey primate. Monkey spider baby. Zoo banana baby. Monkey exotic exotic banana. Banana arboreal. Zoo funny monkeys.

col col-sm-4

Column 2

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Space monkey endangered spider exotic zoo. Exotic zoo spider rainforest. Capuchin howler endangered. Howler funny monkeys space monkey primate. Monkey spider baby. Zoo banana baby. Monkey exotic exotic banana. Banana arboreal. Zoo funny monkeys.

col col-sm-4

Column 3

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Space monkey endangered spider exotic zoo. Exotic zoo spider rainforest. Capuchin howler endangered. Howler funny monkeys space monkey primate. Monkey spider baby. Zoo banana baby. Monkey exotic exotic banana. Banana arboreal. Zoo funny monkeys.

 

 

 


 

 

Example #2  - 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

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Column 2

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Space monkey endangered spider exotic zoo. Exotic zoo spider rainforest. Capuchin howler endangered. Howler funny monkeys space monkey primate. Monkey spider baby. Zoo banana baby. Monkey exotic exotic banana. Banana arboreal. Zoo funny monkeys.

Column 3

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

 

Advanced Columns Snippet
ROW CLASS row
Column Class Column Content
col-12 col-sm-4 col-md-3

Column 1

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

col col-sm-4 col-md-6

Column 2

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Space monkey endangered spider exotic zoo. Exotic zoo spider rainforest. Capuchin howler endangered. Howler funny monkeys space monkey primate. Monkey spider baby. Zoo banana baby. Monkey exotic exotic banana. Banana arboreal. Zoo funny monkeys.

col col-sm-4 col-md-3

Column 3

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

 

 

 


 

 

Example #3  - Row Class Modifiers

This Example creates the same columns from example 2, however uses the ROW CLASS field to enter more classes to align the items center vertically using align-items-center.

 

Column 1

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Column 2

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

Column 3

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

 

Advanced Columns Snippet
ROW CLASS row align-items-center
Column Class Column Content
col-12 col-sm-4 col-md-3

Column 1

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

col col-sm-4 col-md-6

Column 2

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

col col-sm-4 col-md-3

Column 3

Baby rainforest tree funny monkeys howler. Endangered tree zoo. Funny monkeys endangered spider endangered. Funny monkeys howler baby baby banana. Tree arboreal banana monkey. Funny monkeys banana. Arboreal funny monkeys. Spider primate rainforest capuchin. Banana capuchin arboreal tree exotic.

 

 

 


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

 Last Modified 5/15/18