Bootstrap grid

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

Description

Grid systems use rows and columns to define web page layout.

The Bootstrap 3 grid system lets you create different layouts based on device size.

Pre-defined CSS class rules

Bootstrap 3 provides a variety of pre-defined CSS class rules.

These class rules are used for several purposes:

• Grid (rows and columns)
• Show an HTML element for a particular device size
• Hide an HTML element for a particular device size
• Boldface, italic, colors, and other display properties

Units of twelve

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