About this lesson
Creating a page layout with the Bootstrap grid system.
Download this lesson’s related exercise files.Understanding The Bootstrap Grid System.docx
199.6 KB Understanding The Bootstrap Grid System - Solution.docx
Understanding the Bootstrap Grid System
Bootstrap uses a 12-column grid system to handle page layout.
When to use
Any time you want to format the layout of your web page, you'll use the Bootstrap grid system.
To use the grid system, use divs with a class of col-md-# where the number sign # is replaced with the corresponding number that you wish to use.
Grid columns are wrapped in a row div.
Grid columns can be any size, between 1 and 12, and the total columns in any row need to add up to 12.
Hints & tips
- Bootstraps grid system is 12 columns.
- All your columns in any row need to add up to 12.
- All columns should be wrapped in a row div.
- Check out the CSS section of GetBootstrap.com to read about the grid system.
Lesson notes are only available for subscribers.