Twitter Bootstrap – Good Looking Time Saver

The past few months I have been playing about with the Twitter Bootstrap. If you haven’t had any exposure to Bootstrap, its a must to check out. Its basically a collection of commonly used web elements that you would normally have to code yourself. Not only does it function brilliantly on multiple platforms and browsers. It also look rather slick. The reason it looks so good is Bootstrap was created by a few Twitter developers and designers. Its clear that they are more than aware  its hard to make a new site from scratch, even for an experienced developer, so they wanted to make something that made the process easier.

So is it just another toolbox? Its a lot more than just a toolbox, Bootstrap takes it a lot further than just plopping an ugly element down. It makes it look good as well. So this gives the developer more time to code functionality, and takes them away from the often tedious task of making things look good. This is a god send if you are someone like me that hasn’t got an artistic bone in his body.

So what exactly is included? There is a lot for such a small zip file,  CSS grid for creating a responsive layout, interface components such as breadcrumbs, progress bars, alerts, navigation, pagination, etc. all with consistent and modern styles. jQuery plugin library’s so you can make the website interactive. And a CSS base for forms, tables, typography, buttons and images.

All that is brilliant and got me started very quickly, but the thing I like most about Bootstrap is probably the most simple addition. Every time I develop anything, I always seem to struggle to get icons for buttons and images to resemble data. Then when I do finally find something that’s usable, I normally have to spend ages cropping and sizing them to what I need. But Bootstrap has taken care of this by including Glyphicons. This has only been made possible because the nice people at have been kind enough to share 140 icons in sprite form, available in dark grey (default) and white. Glyphicons are not normally available for free, but an arrangement between Bootstrap and the Glyphicons creators has made this possible at no cost to us as developers. As a thank you, all they ask is to include an optional link back to Glyphicons whenever practical.

I could detail more about how to incorporate Bootstrap into a new or existing project, but they have all ready done that here. If you want to see what Bootstraps components look like go here. They also detail the base CSS here.