Logo

Dreams Technologies

My Profile Settings Logout
Logo

Dreams Technologies

My Profile Settings Logout
Grid

Grid options

See how aspects of the Bootstrap grid system work across multiple devices with a handy table.

Extra small
<576px 		Small
≥576px 		Medium
≥768px 		Large
≥992px 		Extra large
≥1200px 		Extra Extra large
≥1400px
Max container 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 24px (12px on each side of a column)
Custom gutters Yes
Nestable Yes
Column ordering Yes

Grid Example

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

Vertical Alignment

one column
two column
one column
two column
one column
two column

Horizontal Alignment

One column
Two column
One column
Two column
One column
Two column

Nesting

Level 1: .col-3
Level 2: .col-5
Level 2: .col-7
Level 1: .col-2
Level 1: .col-10
Level 2: .col-4

Order

First Item (order-3)
Second Item (order-first)
Third Item (order-last)
Fourth Item (order-2)
fifth Item (order-5)
sixth Item (order-4)

Offset

col-5 offset-3
col-2 offset-2
col-4 offset-2
col-3 offset-2

Column Wrapping

.col-9
.col-4
Since 9 + 4 = 13 > 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit.
.col-6
Subsequent columns continue along the new line.

Margin utilities

.col-md-4
.col-md-4 .ms-auto
.col-md-3 .ms-md-auto
.col-md-3 .ms-md-auto
.col-auto .me-auto
.col-auto

Column Breaks

.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3
.col-6 .col-sm-3

You may also apply this break at specific breakpoints with our responsive display utilities.

.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4
.col-6 .col-sm-4

Customizer

Customize your overview Page layout

Close Icon
Layout
Choose your layout
Vertical
Horizontal
Two Column
Color Scheme
Choose Light or Dark Scheme.
Orange
Light
Dark
Blue
Maroon
Purple
Layout Width
Choose Fluid or Boxed layout.
Fluid
Boxed
Layout Position
Choose Fixed or Scrollable Layout Position.
Topbar Color
Choose Light or Dark Topbar Color.
Light
Dark
Buy Now