First Impressions of Twitter Bootstrap

Twitter Bootstrap 2.0 was released a couple of weeks ago, and while we haven’t used it in any of our projects yet, it’s something that’s been very interesting for our team. We’re still experimenting with it and learning new things every day. Here’s what we know so far.

Twitter Bootstrap is a “front-end toolkit” helping developers with their HTML, CSS, and JS work. As we’ve been playing with the toolkit and reading it’s docs, we’ve noticed two levels of developers that would use Bootstrap: the beginner front-end developer looking to learn about best practices and the senior experienced front-end developer that’s tired of writing the same code with each project.

Bootstrap, from Twitter

It’s easy to learn the basics of CSS and Javascript development. Read a few articles, check out some tutorials, and toy around with setting some styles and using event listeners. At that point you might think you’re ready to build a magnificent site, replicating all of the features of the Facebooks and Googles. But as you get into it, it’s obvious it’s way over your head. How do they get every button, link, and alert window to look so consistent? How do they get their website to look perfect on any device, regardless of screen size, you view it on? There must be some secret code base that all front-end developers at these great websites are using. Yup, it’s called Twitter Bootstrap.

Introduced by Jacob Thorton and Mark Otto of Twitter, Bootstrap is a public repository on GitHub, where anyone can recommend, discuss, and contribute code for new features in the toolkit. As the most watched repository on GitHub and the second most forked repository on Github, Bootstrap is used by and contributed to by the community every single day. For a beginner, Twitter Bootstrap is the perfect way to understand the current best practices for front-end web development. But Bootstrap isn’t just for beginners; experts love it too.

It’s hard to have enough energy and interest to build the custom parts of a project after spending days and weeks doing the same repetitive boring front-end work that you’ve already done a thousand times. You’re an expert at CSS and Javascript, but how much of your development work is just getting the layout of a page correct? How much time is spent building the same type of buttons over and over again?

Twitter Bootstrap handles all of that basic stuff for you. With a 12 x 12 responsive grid, configuring a layout is as easy as setting a class on an HTML element. The entire grid is 12 columns wide, so if you want an element that spans four columns and holds its shape on any screen size, all you need to do is

<div class="span4"...

and the CSS files included with Twitter Bootstrap handle all of that boring, basic stuff. Want to do those awesome pop-overs that everyone is crazy about since their use in the iPad? Bootstrap has that built in too. All you need to do is


and the Javascript files included with Twitter Bootstrap handle everything for you. Want to have a search form that automatically provides a list of drop-down options based on what the user just typed? Just use


and Twitter Bootstrap handles it for you. Want to use a cool new feature or not have to worry about basic front-end work? Odds are, Twitter Bootstrap has it built in, or there are other people in the community currently building it and about to commit it to the public repository for all to use.

The team here is still exploring Twitter Bootstrap, but so far everything has been extremely user friendly and powerful. As we keep on our Bootstrap adventure, we’ll keep you posted on what we discover.



Interested in industry news and trends?

Sign up for our monthly email to get the highlights on technologies and innovations impacting mobile strategy.