Bootstrap grid
In Bootstrap (framework), the grid is a page layout structure.
Contents
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
Grid System Rules
Containers
Use the .container class for a fixed-width layout
Use the .container-fluid class for a full-width layout
Assign the class to one or more HTML elements on the page:
Simple example with one container:
<body> <div class="container"> <!-- page content goes here ... --> </div> </body>
More complex layouts use two or more containers, to combine fixed-layout and fluid-layout elements on a single page.
Rows
Inside the container, create one or more rows.
Use the .row class to define a row.
Example:
...
Columns
Inside the row, create one or more columns.
Use the column classes to define columns.
- ...
Keep in mind: Bootstrap 3 uses a total of twelve columns per row.
Content
Put your content (text, images, etc.) inside the columns.
Examples
Coming soon.
See also
External links
- Bootstrap grid (PDF) @ code.karljones.com
- Bootstrap grid @ w3schools.com
