This website uses cookies to improve your experience and for personalised ads/content. 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-12Column #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-12Test 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
