Bootstrap Grid System

Creating responsive layouts with Bootstrap grid

Container

.container # fixed-width responsive container
.container-fluid # full-width container
.container-sm # responsive at small breakpoint
.container-md # responsive at medium breakpoint

Grid Classes

.row # create row
.col # equal width column
.col-6 # 6 out of 12 columns (50%)
.col-md-4 # 4 columns on medium+ screens

Responsive Columns

.col-sm-6 # small devices (≥576px)
.col-md-4 # medium devices (≥768px)
.col-lg-3 # large devices (≥992px)
.col-xl-2 # extra large (≥1200px)
.col-xxl-1 # extra extra large (≥1400px)

Column Alignment

.justify-content-start # align left
.justify-content-center # align center
.justify-content-end # align right
.justify-content-between # space between

Vertical Alignment

.align-items-start # align top
.align-items-center # align middle
.align-items-end # align bottom

Offset

.offset-2 # offset by 2 columns
.offset-md-3 # offset on medium+ screens