Bootstrap grid

In Bootstrap (framework), the grid is a page layout structure.

Description

The Bootstrap grid is based on units of twelve.

The entire width of the browser is divided up into units twelve.

Columns

To create columns in Bootstrap, divide up twelve in different ways.

For example:

• 6 + 6 = two equal columns
• 8 + 4 = wider column, narrower column
• 4 + 8 = narrower column, widerer column
• 4 + 4 + 4 = three equal columns

Display sizes

The Bootstrap grid provides for four different device display sizes:

• Mobile phone
• Tablet
• Laptop / Desktop
• Wide desktop

How it's done

It's done by adding class values to HTML elements in your page.

The class values are built into Bootstrap. Learn these values and how to use them.

Examples

Coming soon.

See also

• Bootstrap (framework)
• Web page layout

External links

• Bootstrap grid (PDF) @ code.karljones.com
• Bootstrap grid @ w3schools.com