Flexible Twitter Bootstrap Grid

Need more columns? No problem!

Posted 10 months ago by Tom Maiaroto.

Twitter Bootstrap is a wildly popular CSS framework and I think it's great. It's seemingly replaced the Blueprint CSS framework craze and now most of the web looks like it was built with Twitter Bootstrap. That's not necessarily a bad thing, but it's pretty easy to identify. Let's change that, shall we?

Perhaps the biggest tell tale sign here is the 12 grid system. Not that it's exclusive to Twitter Bootstrap, there's the 960gs, Blueprint itself, as well as many others that use 12 columns. However, it limits pretty much the entire web to a very few options when it comes to layout and often you'll find web designers simply not using the grid system. 

When you stop using the grid system that's been setup you really miss out on a lot of responsive features and start to run into issues when tryin to support multiple devices. It's on you now to create styles for each device resolution should you start to deviate from the framework. This is tedious and completely unnecessary.

I've put together a light-weight JavaScript file that you can include in any Twitter Bootstrap 3 project that will allow you to change the number of columns in the grid...On a row by row basis! So it doesn't destroy anything nor does it even come into play until you apply data attributes to your row elements. It gives you absolute control over the grid system (from a horizontal perspective, I am trying to work on getting the typography to conform to a baseline grid, more on that later).

You can not only control the number of columns, but also the gutter size. Again, all alterations are done on a row by row basis.

It's fairly intuitive and easy to use since it doesn't require you to use any new classes at all. It merely extends Twitter Bootstrap's convention. So classes like .col-md-24 will work (depending on your grid size) as if it was built into Twitter Bootstrap.

You can view a demo here on its GitHub page and of course clone and/or contribute to the project on GitHub. Though the easiest way to use it is by installing it using Bower by running: 

bower install gridline-bootstrap

Include the JavaScript in the <head> section of your page. It will load upon document ready and go to work. How does it work you ask? It simply looks for data attributes that define new sets of columns and adds styles to sheets, for each device resolution set, at the end of all other styles on the page. It then applies a new class to the row container and the targeted styles override the default styles from Twitter Bootstrap.

Is it possible to do with JavaScript? Sure! But you'd have to either adjust Twitter Bootstrap and re-build the CSS from LESS or you'd have to add many new styles manually to another stylesheet. This would take a lot of effort. The JavaScript allows the process to be more dynamic, effortless, and only adds the CSS that's needed instead of adding a bunch of CSS that you "might" use.

So why not adjust the LESS and change @grid-columns and other variables? Two reasons. First, if you installed Twitter Bootstrap with Bower and wish to keep up to date (or are using a CDN), then you shouldn't really be re-building the project. You are creating a maintenance issue. Second, even if you did adjust the LESS files, you're still stuck with one option. This script allows each row on the page to have a different number of columns.

Feel free to contribute back, let me know of any issues, or let me know your thoughts. I hope you find the tool useful. 

Filed under
comments powered by Disqus

Search for Posts

Popular Labels

social media virality score general internet web development reviews and opinions php web tools hosting lithium web design

Recent Posts