bootstrap-grid
Bar Talk

Understanding the Bootstrap 3 Grid System

With the 3rd version of the great Bootstrap out for about 4 and a half months now, people have had their time to play around with it, learn the changes, find new features, and build amazing things.

The Difference

The most interesting change for me was the difference in the grid system. Bootstrap 2 catered to two different browser sizes (desktop and then mobile). With Bootstrap 3, you now build with mobile in mind first, and the grid system lets you create different grid systems based on browser size.

Bootstrap 2

The grid you create works on desktops and then stacks on top of each other when browser size is below 767px. This is limited since you can only define 1 grid on desktop sized browsers. You are left with a stacked grid on mobile devices.

Bootstrap 3

The new Bootstrap grid system applies to mobile first. When you declare a specific grid size, that is the grid for that size and above. This can be a little hard to grasp at first so here’s an example.

For example, let’s say you want a site that has:

  • 1 column on extra small devices
  • 2 columns on small AND medium devices
  • 4 columns on large devices

Since the grid system now cascades up from mobile devices, this is how this code will look.


<div class="row">
	<div class="col-sm-6 col-lg-3">
		This is part of our grid.
	</div>
	<div class="col-sm-6 col-lg-3">
		This is part of our grid.
	</div>
	<div class="col-sm-6 col-lg-3">
		This is part of our grid.
	</div>	
	<div class="col-sm-6 col-lg-3">
		This is part of our grid.
	</div>	
</div>

We don’t have to define anything for extra small devices since the default is one column. We have to define a grid size for small devices, but not for medium devices. This is because the grid cascades up. So if you define a size at sm, then it will be that grid size for sm, md, and lg.

We’ll explain the different grid sizes and how you create them and then show examples.

The Grid Sizes

This is the best part about the new grid system. You could realistically have your site show a different grid on 4 different browser sizes. Below is the breakdown of the different sizes.

.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

The official Bootstrap docs offer a much more comprehensive understanding of how the grid works. Take a look at those to get a more solid overview of column sizes, gutter sizes, maximum column sizes, and the max-width of your overall site based on browser size.

Default Sizes for the Bootstrap Grid

Sometimes you will need to use media queries to get your site to act the way you’d like it to. Knowing the default grid sizes is essential to extending the Bootstrap grid. We’ve written up a quick tip to show you the default sizes so take a look if you need the Bootstrap media queries and breakpoints.

Bootstrap Media Queries and Breakpoints

Responsive Utilities

Just like Bootstrap 2, Bootstrap 3 provides responsive utilities for hiding and showing elements based on the browser size. This will also help us in defining our grid system.

  • .visible-xs
  • .visible-sm
  • .visible-md
  • .visible-lg
  • .hidden-xs
  • .hidden-sm
  • .hidden-md
  • .hidden-lg

This helps because we are able to show certain elements based on size. In our examples today, we’ll be showing an extra sidebar on large desktops.

Examples

Here are a few examples of the grids that you can create. We’ll go through some basic sites that some people might want and show how easy it is to build that site with the Bootstrap 3 grid.

Resize your browser’s width to see the different grids in action.

Simple: Large Desktop vs Mobile

Let’s say you wanted a site to have 1 column on extra small (phone) and small (tablet) devices, 2 columns on medium (medium desktop) devices, and 4 columns on large (desktop) devices.

Large Devices!
Medium Devices!
Extra Small and Small Devices

Large Devices!
Medium Devices!
Extra Small and Small Devices

Large Devices!
Medium Devices!
Extra Small and Small Devices

Large Devices!
Medium Devices!
Extra Small and Small Devices

Here is the code for that example:


<div class="row">
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>	
	<div class="col-md-6 col-lg-3">
		<div class="visible-lg text-success">Large Devices!</div>
		<div class="visible-md text-warning">Medium Devices!</div>
		<div class="visible-xs visible-sm text-danger">Extra Small and Small Devices</div>
	</div>	
</div>

Intermediate: Show Extra Column on Large Desktops

This is an interesting example and one that the new grid excels at. Let’s say you have a site that has a sidebar and a main content section. For extra small devices, you want one column, main content with the sidebar stacked below it. For small and medium devices, we want sidebar and main content to sit side by side. Now for large devices, we want to utilize the space on larger devices. We want to add an extra sidebar to show more content.

I am the main content.

I am the main sidebar.

I am the secondary sidebar that only shows up on LARGE devices.

We change the size of the main content to span 6 columns on large devices to make room for our second sidebar. This is a great way to utilize the space on larger desktops. And here is the code for that example.


<div class="row">
	<div class="col-sm-9 col-lg-6 text-danger">
		I am the main content.
	</div>
	<div class="col-sm-3 text-warning">
		I am the main sidebar.
	</div>
	<div class="col-lg-3 visible-lg text-success">
		I am the secondary sidebar that only shows up on LARGE devices.
</div>
</div>

Advanced: Different Grid For Every Size

This will be a more complex example. Let’s say that at no point in our grid system do we want all of our columns to stack. For extra small devices, we want 2 columns. For small devices, we want 3 columns. For medium devices, we want 4 columns. For large devices, we want 6 columns (one that only shows on large devices).

You get the drill now. Let’s just straight into the example and code.

I’m content!

I’m content!

I’m content!

I’m content!

I’m content!

I’m content only visible on large devices!


<div class="row">
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2">
		I'm content!
	</div>
	<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 visible-lg">
		I'm content only visible on large devices!
	</div>
</div>

You can see that as the browser size gets smaller, the columns start to form. Also, the content inside each will begin stacking.

It’s Gridtastic!

You can see how easily it is to build complex and dynamic sites with the Bootstrap 3 grid. From mobile 2 column sites to complex hiding and showing elements on large desktops, you can build any type of site. Hopefully these examples will give you an idea of the flexibility of the new grid system and all the great things you can create.

Design, development, and anything in between that I find interesting.

View My Contributions

Stay Connected With Us
hover these for magic

Get valuable tips, articles, and resources straight to your inbox. Every Tuesday.

  • rt

    Great explanation. Thanks

  • SpeakDesign

    Great tutorial, I was wondering what does ‘text-success’, ‘text-warning’ and ‘text-danger’ do? I saw those in a few of the examples.

    • http://scotch.io/ Chris Sevilleja

      Hey Tom, glad to see you on here. Those are classes that are pulled from Bootstrap.

      Bootstrap provides a lot of helpful CSS classes to use so go through the docs and see what else you can use it for.

      • ML

        or in other words: “i’ve semantically used these classes wrongly.” :)

  • Jonrod

    Coming from Foundation 4, I think the huge advance from bootstrap 2 vs bootstrap 3 is definitely the choice we now have to stack our columns or NOT below 768px. Without this feature, bootstrap 2 was useless since, stacking columns was automatic…
    Great article for the basics. ;)

  • John Slegers

    In Bootstrap, you’re restricted to a fixed number of colums (12 by default, although configuration allows a different value). In Cascade Framework ( http://www.cascade-framework.com/ ), there is no such restriction. Out of the box, Cascade Framework’s grid system supports 60/40, 25/75, 33.33/66.66, 20/20/20/20/20, 43.75/31.25/25, 30/30/40 and far more combinations. In fact, you can even use combinations like 42.8571429/{fill to 100}, {fit content}/{fill to 100} or {fit content}/30/{fill to 100}.

    Cascade Framework integrates the media object (see eg.http://www.stubbornella.org/content/2010/06/25/the-media-object-saves-hundreds-of-lines-of-code/ ) into the grid system, which allows unprecedented flexibility with a pretty simple syntax compared with other grid implementations.

    Bootstrap also provides a media object implementation (http://getbootstrap.com/components/#media) but as a seperate UI components. The use of its {fit content} and {fill to 100} equivalents can only be used as part of such a media object component. You can’t use them as elements of your grid.

    Also, note that – unlike Bootstrap – Cascade Framework supports IE6-8… and that its total featureset is somewhat similar to that of Bootstrap, but with a much, much smaller footprint… In fact, he total framework CSS is only 11kb minified and gzipped!

  • http://rightblog.ru/ Юрий

    Thanks for such good explanation!)

  • Pingback: Ressources design | Pearltrees

  • Pingback: Understanding the Bootstrap 3 Grid System | RK Projectstudio

  • http://fearlessflyer.com Michael Soriano

    I have a similar post that I want to share: http://fearlessflyer.com/the-evolution-of-video-in-web-design/

  • Pingback: Weekly Design News (N.219) - Speckyboy Design Magazine - Speckyboy Design Magazine

  • Brandon Provo

    Using this at work. You Rock!

  • Jose Aquino

    Great tutorial! and just a simple correction, in the first example you mention that it will generate 3 columns in large screen, but in fact it should say 4. Thanks for the great article, cheers!

    • http://scotch.io/ Chris Sevilleja

      Great. Fixed. Thanks very much.

  • waseemmachloy

    how many grid are thier in bootstap ? some where they are total 12 in one row , some where 24 and some places 32 .
    or you can make grid as much as you want ?

    • http://scotch.io/ Chris Sevilleja

      You have the ability to adjust how many columns you want by customizing the system. http://getbootstrap.com/customize/#grid-system

      • waseemmachloy

        thanks for you reply , so by default their are 12 grids on all (xs ,sm,md,lg)? am i right? :)

        • http://scotch.io/ Chris Sevilleja

          Yes.

  • http://www.zeninvader.com/ Constant Rock

    I think it is the best article on this so far. I also tried to create a similar approach to this and hope it will help some people: http://www.zeninvader.com/css/bootstrap-3-grid-system-explained

  • Pingback: Understanding the Bootstrap 3 Grid System | Be Parallel Web Logs

  • Quy

    thank for tut. it guide very helpful

  • Matt Keogh

    Great article. I’ve only used bootstrap 3 on two large projects so far but on each one, I’ve found the need to add another breakpoint at about 450px. So things are generally stacked up to that point and then start having layout. 768px is too late. I know that it’s possible to change the breakpoints in the variables file, BUT I still want all those breakpoints so by about 1200px I still need the large one. Previously I updated the mixin to allow for another one but it didn’t feel like the smartest solution. Has anyone else come across this and have a better way?

  • Pingback: Default Sizes for Twitter Bootstrap’s Media Queries ♥ Scotch

  • Pingback: Дайджест полезных ссылок для интернет-маркетёра #1 Блог Александра Сарычева