English
Spanish
German
Italian
Hindi
French
Equal-width Columns
Columns will automatically split the available row width equally using the base `.col` helper.
.col
.col
.col
.col
.col
Variable-width Columns
Mix fixed column sizing (out of 12) with auto-expanding equal-width columns as needed.
.col-6
.col-3
.col-3
.col-8
Auto-fill
Responsive Breakpoints
Resize your window viewport to observe columns wrapping dynamically based on screen widths.
sm: 6 | md: 4 | lg: 3
sm: 6 | md: 4 | lg: 3
sm: 6 | md: 4 | lg: 3
sm: 6 | md: 4 | lg: 3
Vertical Alignment
Align items vertically using alignment utilities like `.align-items-center` or `.align-self-end`.
Top / Centered
Top / Centered
Top / Centered
Horizontal Alignment
Distribute columns horizontally within a row using utilities like `.justify-content-center` or `.justify-content-between`.
Centered
Centered
Between
Between
Grid Nesting
Incorporate separate nested grid systems inside layout columns by wrapping content in a nested `.row`.
Outer Column (col-md-6)
Nested 6
Nested 6
Outer Column (col-md-6)
Nested 4
Nested 8