bootstrap-grid.css — scoped Bootstrap grid demo

Equal columns

Three .col-md-4 columns; they stack below the md breakpoint.

.col-md-4

The 12-column grid

Twelve .col-1 columns — the widths sum to the row.

1

2

3

4

5

6

7

8

9

10

11

12

Halves, thirds, quarters

.col-6

.col-4

.col-3

Auto-layout & `.col-auto`

.col shares remaining space; .col-auto is content-width.

.col

.col-auto (narrow)

.col

Offsets

.col-md-6 .offset-md-3

.col-md-4 .offset-md-8

Ordering

Source order is A, B, C — displayed order is set by .order-*.

A · .order-3

B · .order-1

C · .order-2

A · .order-last

B · .order-first

Gutters & `.g-0`

Default row, then .g-0. Bootstrap 5 also adds .g-*, .gx-* and .gy-* (0–5) for graduated gutter widths — .g-0 replaces Bootstrap 4's .no-gutters.

gutters

.g-0

Nested rows

.col-md-8

nested .col-6

.col-md-4

Responsive visibility

Resize the window. Bootstrap 5 uses display utilities for this; .hidden-*-up / .hidden-*-down from Bootstrap 4 no longer exist.

.d-none .d-md-block — hidden on small

.d-md-none — hidden from md up

Scoping / isolation

This is what this package provides over Bootstrap's official grid build. The markup below is identical to the first example but sits outside .bootstrap-wrapper — so it gets no grid layout at all, and Bootstrap's selectors never touch the rest of your page.

.col-md-4 — unstyled (no wrapper)

Flex alignment new in 5.x

.justify-content-* and .align-items-* are included in this build, along with .align-content-*, .align-self-* and .flex-*, at every breakpoint. The Bootstrap 4 grid-only build omitted them.