Get to Know Twitter Bootstrap

By Frank Ramirez
Guest Blogger

illus_bootstrap

You may have never heard of Twitter Bootstrap and up until about a month ago, neither did I.  Twitter Bootstrap is an open-source framework that is used to build websites and web applications.  In short it is a free set of tools that include HTML & CSS templates, as well as, optional JavaScript extensions and a host of other interface goodies such as typography, buttons and more.

Twitter Bootstrap was released in August 2011 and is hosted on GitHub, an open-source code repository.  Just 6 months after it’s release, Twitter Bootstrap was the most popular GitHub development tool, where it remains today.  Without getting into “techie” speak too much, Twitter Bootstrap has plenty of features and there are many reasons to use the framework in your next website project, but I want to discuss some of my favorites.

  • It’s uniform or consistent across all browsers.  Whether you’re using Chrome, Firefox or Internet Explorer, you will see the same thing.  This has been somewhat of a challenge for web developers in the past.
  • It’s responsive.  This means that if you go from viewing the site on a desktop to a tablet to a smartphone, the layout will adapt or change to accommodate the given screen space.  If you want to see this feature in action, look at the bottom of this post for a neat activity you can do from your desktop or laptop web browser.
  • It can be customized.  You can pick and choose which components or features you want to use in your website project, which ties into the next point.
  • It saves time from a code-writing standpoint.  Twitter Bootstrap includes some code that is already pre-written, which means the web developer doesn’t have to spend valuable time starting from scratch.
  • It’s community supported.  There is a large community out there using and developing Twitter Bootstrap, so there is plenty of support out there.

In closing, Twitter Bootstrap is a very popular and powerful framework that for making a website.  It comes standard with lots of great features, a community of developers that use the framework and the best part is it’s absolutely free.  Feel free to contact me at FrankFaarRamirez@gmail.com with questions or comments about this post.

See Twitter Bootstrap responsive design in action.

  1. Open your web browser of choice be it Chrome, Firefox, Internet Explorer, etc (I did this exercise with Chrome, Firefox, Safari and Opera)
  2. Go to the Twitter Bootstrap website – http://twitter.github.com/bootstrap/
  3. Maximize your web browser, where it takes up the entire screen.
  4. Then grab the lower right-hand corner and resize the browser.  Begin by resizing it until it is about the size of a tablet screen, then continue until it’s about the size of a smartphone screen and back up again.
  5. You should see the website layout “respond” and adapt to the screen size.

Here are links to the Twitter Bootstrap & GitHub sites, that I discussed in this article.

Twitter Bootstrap website / download – http://twitter.github.com/bootstrap/

GitHub (open-source code repository) website – https://github.com/