What is Twitter Bootstrap?

Twitter Bootstrap is a free set of tools for building web applications. It comprises template files, as well as optional JavaScript extensions. Developed by a couple of engineers at Twitter (hence the name), it was originally designed to help provide some consistency across tools the guys were building internally. Since its first public (open source) release in 2011 (see the blog post here) it has found huge popularity amongst web developers for its ease of use and feature set, and in 2012 was the most popular project on GitHub. Its advocates praise Bootstrap’s ability to build usable apps, with clean code, quickly and easily.

At its heart, Twitter Bootstrap is basically simple good old CSS, but it uses the LESS preprocessor to add a lot more functionality that CSS could otherwise provide. The total package is a tiny 6KB is size, and only comprises seven files. So what features are included? Here is the low down:

• Layout grid - A standard 940 pixel width grid layout is provided, allowing developers to quickly get an apps page structure sorted. There is an optional variable width layout, should developers wish to use that instead.
• Support for responsive design - Websites adjust dynamically based on device being using to browse them. The included grid layout comes in four variations for various devices.
• Interface components - A large number of interface components are also provided. These include standard buttons, labels, preformatted warning and system messages, navigation controls, wizard controls, pagination, and breadcrumbs.
• Javascript snippets - Again the focus here is on user interface elements. Included is code to help build tooltips, dialog boxes, as well as more traditional form and input elements (including a nice autocomplete feature).

One of the great things about Bootstrap’s success is the sheer amount of support and advice that is now out there on the web. Not only can you find everything on GitHub but sites like webdesigntuts offer really useful guides.

In future weeks we will try and look at some other frameworks, but if you are looking to build a new web app now, you could certainly do a lot worse than look at Twitter Bootstrap to help get you started.

Check out Ignite UI because in 13.1 we are adding Twitter Bootstrap support for more information see Jason Beres blog post “Ignite UI: What’s New in 13.1 HTML5, jQuery & ASP.NET MVC Controls”