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