CSS

Grid classes are used to provide structure for content. They can be combined to create application specific layouts.

Classes

CSS Class	Host Element(s)	Type	Description	Required
.clr-col-{1..12}	div	layout	For viewport width < 576px an extra small column that can span from 1 to 12 columns wide.	no
.clr-col-sm-{1..12}	div	layout	For viewport width >= 576px a small column that can span from 1 to 12 columns wide.	no
.clr-col-md-{1..12}	div	layout	For viewport width >= 768px a medium column that can span from 1 to 12 columns wide.	no
.clr-col-lg-{1..12}	div	layout	For viewport width >= 992px a large column that can span from 1 to 12 columns wide.	no
.clr-col-xl-{1..12}	div	layout	For viewport width >= 1200px an extra-large column that can span from 1 to 12 columns wide.	no
.clr-row	div	layout	A horizontal group of elements that add up to 12 columns.	no
.clr-col	div	layout	Automatically divides elements into equal width columns. Can be combined with .clr-col-## for automatic re-sizing.	no
..clr-col-{1..12}-auto	div	layout	Size the column based on the width of its content.	no
.clr-row-break	div	layout	Use this after a column to break the following columns onto a new line.	no
.clr-offset-{sm, md, lg, xl}-{1..11}	div	layout	Combine this with a column class (.clr-col-6) to increase the lolumns left margin by a specific number of columns.	no
.clr-align-items-{1..12}-start	div	layout	Combine with .clr-row to vertically align columns at the start of the row.	no
.clr-align-items-{1..12}-center	div	layout	Combine with .clr-row to vertically align columns at the center of the row.	no
.clr-align-items-{1..12}-end	div	layout	Combine with .clr-row to vertically align columns at the end of the row.	no
.clr-align-self-{1..12}-start	div	layout	Combine with any .clr-col-* class to vertically align the column at the start of the row.	no
.clr-align-self-{1..12}-center	div	layout	Combine with any .clr-col-* class to vertically align the column in the center of the row.	no
.clr-align-self-{1..12}-end	div	layout	Combine with any .clr-col-* class to vertically align the column at the end of the row.	no
.clr-justify-content-start	div	layout	Combine with .clr-row to horizontally align columns at the start of the row.	no
.clr-justify-content-center	div	layout	Combine with .clr-row to horizontally align columns in the center of the row.	no
.clr-justify-content-enbd	div	layout	Combine with .clr-row to horizontally align columns at the end of the row.	no
.clr-justify-content-around	div	layout	Combine with .clr-row to horizontally align columns with even space around all columns.	no
.clr-justify-content-between	div	layout	Combine with .clr-row to horizontally align columns with space between all columns from row start to row end.	no