Buttons
- Home
-
Buttons
Grid System
Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, five default responsive tiers, Sass variables and mixins, and dozens of predefined classes.
<divclass="container"><divclass="row"><divclass="col-sm"> One of three columns </div><divclass="col-sm"> One of three columns </div><divclass="col-sm"> One of three columns </div></div></div>Grid options
While Bootstrap uses ems or rems for defining most sizes, pxs are used for grid breakpoints and container widths. This is because the viewport width is in pixels and does not change with the font size.
|
Extra small <576px |
Small ≥576px |
Medium ≥768px |
Large ≥992px |
Extra large ≥1200px |
|
|---|---|---|---|---|---|
| Max container width | None (auto) | 540px | 720px | 960px | 1140px |
| Class prefix |
.col-
|
.col-sm-
|
.col-md-
|
.col-lg-
|
.col-xl-
|
| # of columns | 12 | ||||
| Gutter width | 30px (15px on each side of a column) | ||||
| Nestable | Yes | ||||
| Column ordering | Yes | ||||
All Breakpoints
For grids that are the same from the smallest of devices to the largest, use the .col and .col-* classes. Specify a numbered class when you need a particularly sized column; otherwise, feel free to stick to .col.
<divclass="row"><divclass="col">col</div><divclass="col">col</div><divclass="col">col</div><divclass="col">col</div></div><divclass="row"><divclass="col-8">col-8</div><divclass="col-4">col-4</div></div>Mix and Match
Don’t want your columns to simply stack in some grid tiers? Use a combination of different classes for each tier as needed. See the example below for a better idea of how it all works.
<!-- Stack the columns on mobile by making one full-width and the other half-width --><divclass="row"><divclass="col-12 col-md-8">.col-12 .col-md-8</div><divclass="col-6 col-md-4">.col-6 .col-md-4</div></div><!-- Columns start at 50% wide on mobile and bump up to 33.3% wide on desktop --><divclass="row"><divclass="col-6 col-md-4">.col-6 .col-md-4</div><divclass="col-6 col-md-4">.col-6 .col-md-4</div><divclass="col-6 col-md-4">.col-6 .col-md-4</div></div><!-- Columns are always 50% wide, on mobile and desktop --><divclass="row"><divclass="col-6">.col-6</div><divclass="col-6">.col-6</div></div>Theme Created By Enegix.All Rights Reserved.