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 = xs
- Tablet = sm
- Laptop / Desktop = md
- Wide desktop = lg
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 fixed-width container:
<body> <div class="container"> <!-- Bootstrap rows and columns go here --> </div> </body>
Simple example with one fixed-width container:
<body> <div class="container-fluid"> <!-- Bootstrap rows and columns go 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:
<div class="row"> <!-- Content and more HTML elements here --> </div>
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
Full example:
<div class="container"> <div class="row"> <div class="col-sm-6">This is column one</div> <div class="col-sm-6">This is column two</div> </div> </div>
The above example demonstrates two columns of equal width (six units each).
Full example, two rows:
<div class="container"> <div class="row"> <div class="col-sm-6">This is column one</div> <div class="col-sm-6">This is column two</div> </div> <div class="row"> <div class="col-sm-8">This is column one row 2</div> <div class="col-sm-4">This is column two row 2</div> </div> </div>
Content
Put your content (text, images, etc.) inside the columns.
Nested grids
Bootstrap 3 supports nested grids -- that is, a set of rows and columns nested inside other rows and columns.
To create a nested grid, first create a basic grid, with a row and two or more columns.
Then, inside one of the columns, create another row, containing two or more columns.
Bootstrap grid design principles
Key principles to keep in mind:
Mobile first
The grid classes are designed to work from mobile up, rather than from desktop down.
This means by default your grid will stack from mobile up until the grid class breakpoint you’ve used is reached.
For example, using .col-lg-* means your grid will stay stacked on mobile, tablet, and small desktop screens.
Only until the large desktop breakpoint is reached will the grid go horizontal.
The grid cascades up
The grid cascades up. When you declare a specific grid size and width, that width applies for that size and for larger sizes.
In other words:
- If you define a column width at size
xs(Extra Small), that rule also applies to Small, Medium and Large views - If you define a column width at size
lg, that rule only applies to Large view
Gutters
Columns automatically create gutters (gaps between column content) via padding.
That padding is offset in rows for the first and last column via negative margin on rows.
You may sometimes need to override the padding, or the negative margins, to achieve your web design goals.
See also
External links
- Bootstrap grid (PDF) @ code.karljones.com
- Bootstrap grid @ w3schools.com
