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.
- You may not need to create row -- 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
