Responsive Grid and Container widths

General Grid classes (all breakpoints)

Class	Properties
col-12	width: 100%;
col-11	width: 91.66666667%
col-10	width: 83.33333333%;
col-9	width: 75%
col-8	width: 66.66666667%;
col-7	width: 58.33333333%;
col-6	width: 50%;
col-5	width: 41.66666667%;
col-4	width: 33.33333333%;
col-3	width: 25%;
col-2	width: 16.66666667%
col-1	width: 8.33333333%;

Breakpoint specific Grid classes (general grid class overrides)

Large Desktop	Normal Desktop	Small Desktop - Large Tablet	Tablet	Mobile
xl-col-12	lg-col-12	md-col-12	sm-col-12	xs-col-12
xl-col-11	lg-col-11	md-col-11	sm-col-11	xs-col-11
xl-col-10	lg-col-10	md-col-10	sm-col-10	xs-col-10
xl-col-9	lg-col-9	md-col-9	sm-col-9	xs-col-9
xl-col-8	lg-col-8	md-col-8	sm-col-8	xs-col-8
xl-col-7	lg-col-7	md-col-7	sm-col-7	xs-col-7
xl-col-6	lg-col-6	md-col-6	sm-col-6	xs-col-6
xl-col-5	lg-col-5	md-col-5	sm-col-5	xs-col-5
xl-col-4	lg-col-4	md-col-4	sm-col-4	xs-col-4
xl-col-2	lg-col-2	md-col-2	sm-col-2	xs-col-2
xl-col-1	lg-col-1	md-col-1	sm-col-1	xs-col-1

Class	Properties
kmd-content-full	width: 100%;
kmd-content-lg	max-width: 1180px;
kmd-content-md	max-width: 768px;
kmd-content-sm	max-width: 680px;
kmd-content-xs	max-width: 480px;
kmd-content-xxs	max-width: 320px;

kmd-content-full

kmd-content-lg

kmd-content-md

kmd-content-sm

kmd-content-xs

kmd-content-xxs

Column #1 - xl-col-11 lg-col-11 md-col-9 sm-col-12 xs-col-12
Column #2 - xl-col-1 lg-col-1 md-col-3 sm-col-12 xs-col-12

Column #1 - xl-col-5 lg-col-5 md-col-6 sm-col-12 xs-col-12 md-pos-1 sm-pos-1 xs-pos-1
Column #2 - xl-col-2 lg-col-2 md-col-12 sm-col-12 xs-col-12 md-pos-3 sm-pos-3 xs-pos-3
Column #3 - xl-col-5 lg-col-5 md-col-6 sm-col-12 xs-col-12 md-pos-2 sm-pos-2 xs-pos-2

10 columns layout

Large Desktop	Normal Desktop	Small Desktop - Large Tablet
xl-1-of-10	lg-1-of-10	md-1-of-10
xl-2-of-10	lg-2-of-10	md-2-of-10
xl-3-of-10	lg-3-of-10	md-3-of-10
xl-4-of-10	lg-4-of-10	md-4-of-10
xl-5-of-10	lg-5-of-10	md-5-of-10
xl-6-of-10	lg-6-of-10	md-6-of-10
xl-7-of-10	lg-7-of-10	md-7-of-10
xl-8-of-10	lg-8-of-10	md-8-of-10
xl-9-of-10	lg-9-of-10	md-9-of-10
xl-10-of-10	lg-10-of-10	md-10-of-10

Example of mixed grid use 12 columns and 10 columns

Column #1 xl-4-of-10 lg-4-of-10 md-col-6 sm-col-12 xs-col-12
Column #1 xl-2-of-10 lg-4-of-10 md-col-6 sm-col-12 xs-col-12
Column #1 xl-4-of-10 lg-2-of-10 md-col-12 sm-col-12 xs-col-12

Responsive Grid and Container widths

General Grid classes (all breakpoints)

Breakpoint specific Grid classes (general grid class overrides)

10 columns layout

Test caption title

Test Content Title

Test caption title

Test Content Title

Test caption title

Test Content Title

Test caption title

Test Content Title

Test caption title

Test Content Title

Test caption title

Test Content Title

Test caption title

Test Content Title

Test caption title

Test Content Title

Get access to member-only promotions