How Grids Work in Twitter Bootstrap

Twitter bootstrap is an excellent framework for building websites. We all know this this is nothing new. The thing about bootstrap that makes it so appealing is the fact that you can rapidly build websites easily. The framework relies on a 12 column grid that is easy to use and customize. You can customize bootstrap before you even download the package. However, I wouldn’t recommend this unless you need this for a specific project. The 12 column grid is easy to work with and makes it easy to create organized and well structured layouts. However, some designers and developers get confused when they need to create advanced layouts using bootstrap. It can be confusing to understand, when you have two classes right next to each other and determining how those two work together. In today’s video tutorial I’m going to show you how grids work in Twitter Bootstrap.

The best examples can be found on getbootstrap.com. They have great samples like the ones I’ve showed you in the video. You can see how different column widths work together to create a well structured layout. The normal column width four Twitter bootstrap for a full width layout is 12 columns. 12 is a great number because so many different numbers go into it. For example, you can have three columns four, four columns of 3, 2 columns of 6, 6 columns of two, and one column of 12. You can also have 12 single columns. But the great thing about that strap is that you can mix and match different column widths to build a varied layout. For example, you could have one 8 column layout next to a four column layout or you could have a seven column layout next to a five column layout. You can mix and match these however you want.

How Grids Work in Twitter Bootstrap

Where advanced layouts come in is that you can specify how different column widths work on different devices. For example, you can specify that a certain column is eight columns wide on a desktop screen but on a mobile phone it would go full width. You do this by specifying the column size next to the number and right after that you specify the other size.

<div class="row">
  <div class="col-xs-12 col-md-8">.col-xs-12 .col-md-8</div>
  <div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>

For example you would create a class that is extra small and is 12 columns wide which means it would be the full with on a mobile device. Then you would specify that it would change to a medium column that is eight columns wide for a desktop screen. This makes it so that you can control every aspect of how your site looks depending on what device it’s being viewed on. This gives you ultimate control over the look of your entire website. This is one of the reasons why Bootstrap is so popular. Having the ability to control the layout of your website depending on the screen size makes it easy for you to work with and a lot less work.

Conclusion: How Grids Work in Twitter Bootstrap

Creating dynamic layouts that look great on many devices is one of the key aspects of the Bootstrap framework. Combining different column sizes and widths to specify how they look on different devices highly customizes the viewer’s experience depending on what device they’re on. If you have any questions about Bootstrap grids, feel free to leave your thoughts or questions in the comments section below.