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



Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text

Test caption title

Test Content Title

Test Content Text