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.
Column theory: units of twelve
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.
- You may not need to create a row -- if your page consists of a single row and single column, you can skip the row and column classes
Use the .row class to define a row.
Example:
...
Columns
Inside the row, create one or more columns.
- You may not need to create a column -- if your page consists of a single row and single column, you can skip the row and column classes
The grid system is built on a set of twelve total columns per row.
Use the predefined Bootstrap column classes to define columns.
There are four sets of column classes, representing four device sizes.
Here is a general outline of the column classes. The stars (*) represent numbers from one to twelve:
-
.col-xs-*= Extra Small Phones Less than 768px -
.col-sm-*= Small Devices Tablets 768px and Up -
.col-md-*= Medium Devices Desktops 992px and Up -
.col-lg-*= Large Devices Large Desktops 1200px and Up
Example:
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
