EMAIL NEWSLETTER
Deliver the best gear and travel inspiration straight to your inbox.
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
