Columns

This row uses the 12-column grid: .col-md-9 and .col-md-3 (9 + 3 = 12). Below md, columns stack full width.

Three Fourth 3/4

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est

One Fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna

.col-md-4 and .col-md-8 (4 + 8 = 12).

One Third 1/3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna. Sed et quam lacus

Two Third 2/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident

Three columns: .col-md-3, .col-md-6, and .col-md-3 (3 + 6 + 3 = 12).

One Fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna.

Two Fourth 2/4

At vero eos similique sunt in culpa qui officia deserunt et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias

One Fourth 1/4

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut non libero magna

Three equal columns: three .col-md-4 (4 + 4 + 4 = 12).

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum

Two halves: .col-md-6 and .col-md-6 (6 + 6 = 12).

One Half 1/2

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in feugiat.

One Half 1/2

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique suntin

Align columns

Center a column with horizontal margin utilities: .mx-auto (works because Bootstrap rows use flexbox).

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Push a column toward the end of the row (right in LTR) with .ms-auto on the column.

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Pin a column toward the start (left in LTR) using .me-auto so remaining space stays on the end side.

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

.me-auto on the first column; .ms-auto on the second—columns sit at opposite ends of the row.

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Opposite margin utilities in one .row.

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Center a group of columns with .justify-content-center on the .row (cleaner than stacking .mx-auto on each column when you want two blocks side by side).

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.

Use .g-3 (or .g-4, etc.) on the row for Bootstrap 5 gutter spacing between columns.

One Third 1/3

At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident.