Twitter Bootstrap is a simple and flexible HTML, CSS, and Javascript for popular user interface components and interactions. It comes with bundles of CSS styles, Components and Javascript plugins. There are quite a few frameworks that do the same thing, but in my point of view Twitter bootstrap is the most comprehensive and covers most UI component that you will needed to build a website or web application.

Features

Bootstrap has relatively incomplete support for HTML5 and CSS 3, but it is compatible with all major browsers. Basic information of compatibility of websites or applications is available for all devices and browsers. There is a concept of partial compatibility that makes the basic information of a website available for all devices and browsers. For example, the properties introduced in CSS3 for rounded corners, gradients and shadows are used by Bootstrap despite lack of support by older web browsers. These extend the functionality of the toolkit, but are not required for its use.

Since version 2.0 it also supports responsive design. This means the graphic design of web pages adjusts dynamically, taking into account the characteristics of the device used (PC, tablet, mobile phone).

Bootstrap is open source and available on GitHub. Developers are encouraged to participate in the project and make their own contributions to the platform.

Grid system and responsive design

Bootstrap comes standard with a 940 pixel wide, grid layout. Alternatively, the developer can use a variable-width layout. For both cases, the toolkit has four variations to make use of different resolutions and types of devices: mobile phones, portrait and landscape, tablets and PCs with low and high resolution. Each variation adjusts the width of the columns.

Understanding the CSS stylesheet

Bootstrap provides a set of stylesheets that provide basic style definitions for all key HTML components. These provide uniform, modern appearance for formatting text, tables and form elements.

Re-usable components

In addition to the regular HTML elements, Bootstrap contains other commonly-used interface elements. These include buttons with advanced features (e.g. grouping of buttons or buttons with drop-down option, make and navigation lists, horizontal and vertical tabs, navigation, breadcrumb navigation, pagination, etc.), labels, advanced typographic capabilities, thumbnails, warning messages and a progress bar.

JavaScript plug-ins

The JavaScript components of Bootstrap are based on the jQuery JavaScript library. Plugins are found in the jQuery toolkit. They provide additional user-interface elements such as dialog boxes, tooltips, and carousels. They also extend the functionality of some existing interface elements, including for example an auto-complete function for input fields. In version 2.0, the following JavaScript plugins are supported: Modal, Dropdown, Scrollspy, Tab, Tooltip, Popover, Alert, Button, Collapse, Carousel and Typeahead.

An implementation of Twitter Bootstrap using the Dojo Toolkit is also available. It is called Dojo Bootstrap and is a port of the Twitter Bootstrap plugins.