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