Let’s start talking about the Grid System, oh the Grid, as a matter of fact, there are four Grid Systems in this new version of Bootstrap, each works exactly the same, being differentiated by the screen size width at which they operate.
Enabling the Grid
In order for the Grid System to work properly and also to ensure proper rendering and touch zooming, add the viewport meta tag to your document:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Different Width Grids
There are four Grid Systems in this new version of the framework, with the width of the viewport being the parameter that differentiates them. The widths that set the frontiers between one and another are as follows:
- Extra small devices ~ Phones (< 768px)
- Small devices ~ Tablets (>= 768px)
- Medium devices ~ Desktops (>= 992px)
- Large devices ~ Desktops (>= 1200px)
And each of the different supported viewports have a particular class to address it, as follows:
- col-xs- ~ Extra small devices
- col-sm- ~ Small devices
- col-md- ~ Medium devices
- col-lg- ~ Large devices
To make use of the Grid System you’d need a container element, with a class
"container", and inside a second container with a class
"row". Notice how in both cases the “fluid” suffix has disappeared, this in contrast with Bootstrap 2. And inside the second container you’d place your columns.
<div class="container"> <div class="row"> <div class="col-xs-6">col-xs-6</div> <div class="col-xs-6">col-xs-6</div> </div> </div>
"xs"are always going to be floated horizontally, no matter the viewport size. If you were to say, use columns prefixed by an
"md"and the viewport happened to be less than 992px wide (even 991px).
The gutter is applies to the following elements
- .col-xs-3, .col-xs-6, etc.
If your gutter is 30px, it adds a padding-left:5px and a padding-right:5px to .col-xs-3 for example.
Some basic rules
- You never need another container inside of a container. Never.
- Never use a row outside a container, it won’t work.
- Bootstrap 3 Grid Introduction
- The Subtle Magic Behind Why the Bootstrap 3 Grid Works
- Twitter Bootstrap Tutorial – Handling Complex Designs
- Building Responsive Websites Using Twitter BootStrap
- Understanding Twitter Bootstrap 3
- Read this article.
- Mobile First With Bootstrap 3
- CSS Frameworks + CSS Reset: Design From Scratch
- How to Build a Responsive WordPress Theme with Bootstrap
- 50 Must-have plugins for extending Twitter Bootstrap