HTML
Preview Buy Now

# Grid System

Use our powerful mobile-first flexbox grid to build layouts of all shapes and sizes thanks to a twelve column system, six default responsive tiers, Sass variables and mixins, and dozens of predefined classes.

#### Basic

Column
Column
Column

#### Grid options

Bootstrap's grid system can adapt across all six default breakpoints, and any breakpoints you customize. The six default grid tiers are as follow:

As noted above, each of these breakpoints have their own container, unique class prefix, and modifiers. Here’s how the grid changes across these breakpoints:

- Extra small (xs)
- Small (sm)
- Medium (md)
- Large (lg)
- Extra large (xl)
- Extra extra large (xxl)

| xs <576px | sm ≥576px | md ≥768px | lg ≥992px | xl ≥1200px | xxl ≥1400px
--- | --- | --- | --- | --- | --- | ---
Container `max-width` | None (auto) | 540px | 720px | 960px | 1140px | 1320px
Class prefix | `.col-` | `.col-sm-` | `.col-md-` | `.col-lg-` | `.col-xl-` | `.col-xxl-`
# of columns | 12
Gutter width | 1.5rem (.75rem on left and right)
Custom gutters | Yes
Nestable | Yes
Column ordering | Yes

#### Equal-width

1 of 2
2 of 2
1 of 3
2 of 3
3 of 3

#### Setting one column width

1 of 3
2 of 3 (wider)
3 of 3
1 of 3
2 of 3 (wider)
3 of 3

#### Variable width content

1 of 3
Variable width content
3 of 3
1 of 3
Variable width content
3 of 3
For more information of the Grid System. Kindly checkout Bootstrap Grid System
For any support related queries just write us at info@designreset.com with your purchase code.