Grid System
The Core grid system is based off of Bootstrap 4, with 12 columns over 5 seperately defined breakpoints.
How it Works
There are three major components—containers, rows, and columns:
- Containers—
.containerfor 100% width up to the XL breakpoint or.container-fluidfor full width—center your site’s contents and help align your grid content. - Regardless of container type, within it a
.rowis required to surround all columns. - Content should be placed within columns, and only columns may be immediate children of rows.
Columns are named in a systemic way, to allow them to occupy different percentages of space at different breakpoints. They all begin with the .col- designation, and the next portions define the breakpoint where it is first applied, and a numeric used to control the width percentage.
Breakpoints
Column breakpoints are additive, meaning they apply to the breakpoint specified and all those above it (e.g., .col-sm-4 applies to small, medium, large, and extra large window sizes):
|
Extra small <544px |
Small ≥544px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Class prefix | .col-xs- |
.col-sm- |
.col-md- |
.col-lg- |
.col-xl- |
Column Width
Column width is determined as a fraction of the 12 columns per row, where the percentage width of a .col-xx-n class is evaluated as n/12. So if you want three equal-width columns, you’d use .col-xs-4.
- Column
widths are set in percentages, so they’re always fluid and sized relative to their parent element. - Columns have
1rempadding on each side to create the gutters between individual columns for a total gutter width of2rem.
SCSS Mixins
Grid classes are created via SCSS mixins, so you can use these instead of grid classes to create custom components and layouts that still align with the defined grid. Refer to css/theme-base/mixins/_grid.scss for the mechanics of their use.
Example: .row
.row
Example: Columns
.col-xs-12.col-md-8
.col-xs-12.col-md-4
.col-xs-12.col-md-4
.col-xs-12.col-md-4
.col-xs-12.col-md-4
.col-xs-12.col-md-6
.col-xs-12.col-md-6
.col-md-4
.col-md-4.col-md-offset-4
.col-md-3.col-md-offset-3
.col-md-3.col-md-offset-3
.col-md-6.col-md-offset-3
Offset Resetting
.col-sm-5.col-md-6
.col-sm-5.col-sm-offset-2.col-md-6.col-md-offset-0
.col-sm-6.col-md-5.col-lg-6
.col-sm-6.col-md-5.col-md-offset-2.col-lg-6.col-lg-offset-0
Margin reordering
.col-md-9.col-md-push-3
.col-md-3.col-md-pull-9
Flexbox reordering
Example: Last column moved to first at lg breakpoint
.col-xs-12.col-md-8
.col-xs-12.col-md-4.col-lg-first
Example: Middle column moved to last at lg breakpoint
.col-xs-12.col-md-4
.col-xs-12.col-md-4.col-lg-last
.col-xs-12.col-md-4
Example: .row-xs-top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus suscipit felis sed porttitor. Duis scelerisque urna ut erat aliquet pharetra. Duis congue fringilla sem. Suspendisse faucibus augue ac ex semper tristique. Curabitur sit amet massa a tortor cursus tincidunt. Integer vel gravida lorem.
Fusce et fermentum nunc, vel vehicula nulla.
Example: .row-xs-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus suscipit felis sed porttitor. Duis scelerisque urna ut erat aliquet pharetra. Duis congue fringilla sem. Suspendisse faucibus augue ac ex semper tristique. Curabitur sit amet massa a tortor cursus tincidunt. Integer vel gravida lorem.
Fusce et fermentum nunc, vel vehicula nulla.
Example: .row-xs-bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus suscipit felis sed porttitor. Duis scelerisque urna ut erat aliquet pharetra. Duis congue fringilla sem. Suspendisse faucibus augue ac ex semper tristique. Curabitur sit amet massa a tortor cursus tincidunt. Integer vel gravida lorem.
Fusce et fermentum nunc, vel vehicula nulla.
Example: .row-xs-baseline
Lorem ipsum dolor sit amet
Fusce et fermentum nunc, vel vehicula nulla.
Example: .col-xs-top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus suscipit felis sed porttitor. Duis scelerisque urna ut erat aliquet pharetra. Duis congue fringilla sem.
.col-xs-top
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus suscipit felis sed porttitor. Duis scelerisque urna ut erat aliquet pharetra. Duis congue fringilla sem. Suspendisse faucibus augue ac ex semper tristique. Curabitur sit amet massa a tortor cursus tincidunt. Integer vel gravida lorem.
Example: .col-xs-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus suscipit felis sed porttitor. Duis scelerisque urna ut erat aliquet pharetra. Duis congue fringilla sem.
.col-xs-center
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus suscipit felis sed porttitor. Duis scelerisque urna ut erat aliquet pharetra. Duis congue fringilla sem. Suspendisse faucibus augue ac ex semper tristique. Curabitur sit amet massa a tortor cursus tincidunt. Integer vel gravida lorem.
Example: .col-xs-bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus suscipit felis sed porttitor. Duis scelerisque urna ut erat aliquet pharetra. Duis congue fringilla sem.
.col-xs-bottom
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce finibus suscipit felis sed porttitor. Duis scelerisque urna ut erat aliquet pharetra. Duis congue fringilla sem. Suspendisse faucibus augue ac ex semper tristique. Curabitur sit amet massa a tortor cursus tincidunt. Integer vel gravida lorem.
Example: Without grid
.container.edge-xs-down
.container.edge-md-up
Example: With grid
.col-xs-8
.col-xs-4
.col-xs-8.edge-l-sm-down
.col-xs-4.edge-r-sm-down
.col-md-4.edge-xs-down
.col-md-4.edge-xs-down
.col-md-4.edge-xs-down.edge-r-lg-up
.col-md-6
.col-md-6.edge-r-md-up