##### Switcher

starts
.g-col-3 .g-start-2
.g-col-4 .g-start-6
Responsive
.g-col-md-4
.g-col-md-4
.g-col-md-4

Compare that to this two column layout at all viewports.

.g-col-6
.g-col-6
Auto columns

When there are no classes on the grid items (the immediate children of a .grid), each grid item will automatically be sized to one column.

.g-col-6
.g-col-6
.g-col-6
.g-col-6

This behavior can be mixed with grid column classes.

.g-col-6
1
1
1
1
1
1
Columns and gaps
.g-col-2
.g-col-2
.g-col-6
.g-col-4
Gaps

Change the vertical gaps only by modifying the row-gap. Note that we use gap on .grids, but row-gap and column-gapcan be modified as needed.

.g-col-6
.g-col-6
.g-col-6
.g-col-6

Because of that, you can have different vertical and horizontal gaps, which can take a single value (all sides) or a pair of values (vertical and horizontal). This can be applied with an inline style for gap, or with our --bs-gap CSS variable.

.g-col-6
.g-col-6
.g-col-6
.g-col-6
Three columns
.g-col-4
.g-col-4
.g-col-4
Wrapping
.g-col-6
.g-col-6
.g-col-6
.g-col-6
Nesting
First auto-column
Auto-column
Auto-column
Second auto-column
6 of 12
4 of 12
2 of 12
Third auto-column
No grid classes
Auto-column
Auto-column
Auto-column
Adding rows
Auto-column
Auto-column
Auto-column
Customizing

Variable | Fallback value | Description
--- | --- | ---
`--bs-rows` | `1` | The number of rows in your grid template
`--bs-columns` | `12` | The number of columns in your grid template
`--bs-gap` | `1.5rem` | The size of the gap between columns (vertical and horizontal)

Are You Looking For...

People Pages Articles Tags

Recent Search :

Notifications
Alerts
Mail