dashnix

# Grid

#### Grid Options

Bootstrap grid allows building equal height flexible blocks easily

| 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

#### Grid Column

Using a single set of `.col-md-*` grid classes, you can create a basic grid system that starts out stacked on mobile devices and tablet devices (the extra small to small range) before becoming horizontal on desktop (medium) devices. Place grid columns within any `.row`.

col-xl-1
col-xl-2
col-xl-2
col-xl-3
col-xl-4
col-xl-5
col-xl-7
col-xl-6
col-xl-6
col-xl-7
col-xl-5
col-xl-8
col-xl-4
col-xl-9
col-xl-3
col-xl-10
col-xl-2
col-xl-12

#### Row columns

Use the responsive `.row-cols-*` classes to quickly set the number of columns that best render your content and layout. Whereas normal `.col-*` classes apply to the individual columns (e.g., .col-md-4), the row columns classes are set on the parent `.row` as a default for contained columns. With `.row-cols-auto` you can give the columns their natural width.

col-xl-3
col-xl-3
col-xl-3
col-xl-3
col-xl-3
col-xl-3
col-4 col-xl-2
col-4 col-xl-2
col-4 col-xl-2
col-4 col-xl-2
col-4 col-xl-2
col-4 col-xl-2

#### Template Settings

Light
Dark
LTR
RTL