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.
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.
bower install gridline-bootstrap
<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.
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.
Search for Posts
Popular Labelssocial media virality score general internet web development reviews and opinions php web tools hosting lithium web design
- 16 Jun Social Media Analytics on a Budget
- 15 May Thinking About Using Laravel?
- 22 Apr Why Dart?
- 16 Jan PHP 5 Framework Comparisons: Bootstrap
- 02 Jan GitHub Issues Feels
- 23 Dec News Ox: Building a Better News Aggregator
- 18 Dec Discovery and Ranking
- 12 Dec Viral News Search
- 06 Dec Flexible Twitter Bootstrap Grid
- 04 Dec Problems With Google Analytics