Blockbox Responsive Multi-Purpose Template

Grid System

Bootstrap’s grid system uses a series of containers, rows, and columns to layout and align content.

Auto Column Width

Utilize breakpoint-specific column classes for equal-width columns.

.col

One Column Width

Setting one column width also means you can set the width of one column and the others will automatically resize around it.

.col

.col-7

.col

Justify Content

Using the classes, columns can size itself based on the natural width of its content.
Add classes .justify-content-*(center,end,around,between) in .row

.col-2

.col-4

.col-2

.col-4

.col-2

Vertical Alignment

Use flexbox alignment utilities to vertically and horizontally align columns.
Add classes .align-items-*(start,center,end) in .row.

.col

.col .align-self-start

.col .align-self-center

.col .align-self-end

Offsetting Columns

Move columns to the right using offset classes. These classes increase the left margin of a columns.

Grid System

I. Container

II. Content

II. Basic Elements

Auto Column Width

.col

.col

One Column Width

.col

.col-7

.col

Justify Content

.col-2

.col-4

.col-2

.col-2

.col-4

.col-2

.col-2

.col-2

.col-2

.col-2

Vertical Alignment

.col

.col

.col

.col

.col

.col

.col

.col

.col

.col .align-self-start

.col .align-self-center

.col .align-self-end

Offsetting Columns

.col-4 .offset-8

.col-4

.col-4 .offset-4