By continuing to use our website, you agree to our use of cookies, used to improve your experience and personalise ads/content. Find out more about managing your cookie settings in our Cookie Policy
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