The foundation of the Twitter Bootstrap framework is its Grid System. The Grid has been rewritten from the ground up in Bootstrap 3. All of the overall layout and screen adaption that takes place in your responsive design is handled by the Grid. It seems very easy in theory, but there are really a lot of details involved with how the Grid operates in the Bootstrap Framework. We’re going to need to understand how this Bootstrap Grid handles the nitty gritty so let’s take a deep dive into it’s details right now!
CSS3 Media Queries
Before we try to comprehend what the Grid is doing in Twitter Bootstrap, we need to take a look at CSS3 Media Queries. CSS3 Media Queries are a fairly new technology, only introduced recently in about 2012. A media query does pretty much what it’s name says. It queries the media type, or the screen in use, and then takes action on what to display based on this outcome. In short, this allows the web page to determine what type of device is currently viewing it, and what the screen size is. For example, is the client viewing on an iPad, iPhone, Desktop, or some other type of internet enabled device? Based on this result, the web page can display in a more mobile friendly, tablet friendly, or desktop friendly layout. If you’r a sucker for super dry reading, but need every detail of how it works, go ahead and read the RFC found at http://www.w3.org/TR/css3-mediaqueries/, and have a good night sleep 🙂
4 Grid Sizes
In the prior version of Twitter Bootstrap, there was only one grid size. In Bootstrap 3, there are 4, yes count them, 4 grid sizes to work with in your pages. Maybe you have a Bootstrap 2 site and you’ve wanted to see what it looks like on a Bootstrap 3 style. I’m sure you thought, like me, “oh, I’ll just swap out this cute little stylesheet here for the latest one, and observe my website in all of it’s beautiful glory!” So you do that and, POOF!, your entire site structure is gone, bye, kaput! Much of this has to do with the fact that the new grid operates completely differently than that of Bootstrap 2. It’s ok though, there are tools out there to help you convert your legacy HTML markup to work with the new version of Bootstrap, and with some understanding of how this new Grid works, you’ll be upgraded in no time. The Grid Sizes are shown here for your joy and excitement:
- xs Grid The grid begins with the extra small grid system, which is designed for smaller devices like smartphones. When the screensize is less than 768px, it will be making use of the extra small grid system. The extra small grid is always horizontal, regardless of device size.
- sm Grid The small grid is horizontal, but will stack at a breakpoint of 768px or lower.
- md Grid The medium grid is horizontal, but will stack at a breakpoint of 992px or lower.
- lg Grid The large grid is horizontal, but will stack at a breakpoint of 1200px or lower.
What Bootstrap Grid Should I Use?
I’m glad you asked young Grasshopper! The reality is it is entirely up to you. Here are a few things to consider though. If you tend to like sites that look exactly the same on your iPhone as they do on your desktop, you want to go with the xs grid. Meaning, if you visit a website on your mobile, and the site defaults to a mobile friendly layout, yet you are looking for a button or link to switch it back to the desktop layout, then this is the grid for you. As humans, we like to take things to the extreme, and at some point I’m sure people will start asking (if they haven’t already), do we really need an infinite number of page layouts for our websites to work well? Clearly we do not as this guy so eloquently states! Ok, enough of that tangent.
Should you choose to want a site that is much more adaptable, and modifies it’s layout on the fly to fit your mobile, tablet, or desktop, then perhaps the sm, md, or lg, grid sizes will work better for you. It just comes down to a matter of preference. Personally I like both, yes I know that is taking the easy way out, but just show me the webpage, and I’ll find my way around 🙂
An Example of the Grid in Action
You are ready. Ready for the source. The source of all that is good and true in web design, the source of the Grid System! Here we will make use of all the grid options in one HTML page. You can then test this page in your browser on different devices, and see how the grid adapts based on which grid type is in use. It’s a great way to have a cheat sheet of sorts to give you a quick idea of what to expect when designing your production websites. Go ahead and put this HTML source into a file called
the-bootstrap-grid.html and place it in your
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Twitter Bootstrap Grid System</title>
<link href="css/bootstrap.css" rel="stylesheet">
padding: 0 20px;
padding: 0 2em;
padding: 1em 0;
border: 2px solid #000;
<h1>The Twitter Bootstrap Grid System</h1>
<h2>All Grids Dynamically Used based on Screen Size</h2>
<p class="visible-lg">lg grid is in use - The grid stacks horizontally at < 1200px. </p>
<p class="visible-md">md grid is in use - The grid stacks horizontally at < 992px. </p>
<p class="visible-sm">sm grid is in use - The grid stacks horizontally at < 768px. </p>
<p class="visible-xs">xs grid is in use - This grid is always horizontal. </p>
<div class="col-lg-4 col-md-1 col-sm-5 col-xs-5"> <span class="visible-lg">.col-lg-4</span> <span class="visible-md">.col-md-1</span> <span class="visible-sm">.col-sm-5</span> <span class="visible-xs">.col-xs-5</span> </div>
<div class="col-lg-4 col-md-5 col-sm-1 col-xs-6"> <span class="visible-lg">.col-lg-4</span> <span class="visible-md">.col-md-5</span> <span class="visible-sm">.col-sm-1</span> <span class="visible-xs">.col-xs-6</span> </div>
<div class="col-lg-4 col-md-6 col-sm-6 col-xs-1"> <span class="visible-lg">.col-lg-4</span> <span class="visible-md">.col-md-6</span> <span class="visible-sm">.col-sm-6</span> <span class="visible-xs">.col-xs-1</span> </div>
<!-- end row -->
<h2>Just the xs Grid</h2>
<!-- end row -->
<h2>Just the sm Grid</h2>
<!-- end row -->
<h2>Just the md Grid</h2>
<!-- end row -->
<h2>Just the lg Grid</h2>
<!-- end row -->
<!-- /container -->
Great! Now you can load this up in your browser using
http://localhost/bootstrap/the-bootstrap-grid.html and you should see something like this at the full screen size:
Once you load up the page and view the grid, you can begin making your browser smaller by dragging it inwards. As you do, you’ll notice that the very top row will adjust itself and use different grid sizes based on the screen size with the help of css3 media queries. It’s really quite slick actually! The remaining grid sizes will begin to stack at different breakpoint sizes as you continue to scale down the size of the page. This will give you an idea of what the grids will look like when in action on your real site and give you a better feel for which types you may want to use yourself.
You know there really is a lot to the Twitter Bootstrap Grid system. This lesson was an attempt to condense some of the more important points into a short and readable tutorial to get us off the ground fairly quickly without having to dig through all of the documentation. Speaking of documentation, why not head on over to the official docs and read up on what the whole grid system has to offer. Keep yourself armed with the best knowledge you can find!