What’s new in Bootstrap 3.0

If you’re a developer – or just interested in developments (pun intended) in the web interface field – you undoubtedly have heard about Bootstrap, a front-end development framework that uses HTML, CSS and JavaScript (jQuery is also required). Originally a Twitter initiative, the Bootstrap team recently announced the launch of version three of their immensely popular platform.

Picture 14

Bootstrap was released two years ago by Twitter as an open source project, and by February of 2012, it had become the most popular GitHub development project, with more than 300 developers adding to the base. The project originally was designed to facilitate and speed interface development at Twitter itself, but the build process resulted in a product that could be used by any developer looking to share common design patterns and assets. Since its general release, Bootstrap has gone through a number of iterations, with the release on August 13 being the latest to incorporate new features and bug fixes.

Version 3.0 continues the four tiers of grid classes for phones, tablets, desktops, and large desktops. UI components range from the basic buttons, labels, and input fields to more complex jumbotrons, badges, navbars, and sticky footers, just to name a few. Developers can pick and choose specific components via the built-in Customizer tool, which has undergone some alterations in Version 3.0.

Some of the new features and improvements include:

  1. A flat theme – still targeted for mobile devices, but including responsive design elements for use on larger screens
  2. Non-responsive design as an option
  3. jQuery plug-ins providing functionality for transitions, tooltips, progress bars, carousels, etc.
  4. Customizer component is now browser-based
  5. Additional glyphicons

For those who have used previous versions of Bootstrap, however, a number of items have changed significantly, including many class renames while seven classes have been totally removed or modified. Support for Internet 7 has also been removed. To see all the changes, consult the migration guide at http://getbootstrap.com/getting-started/#migration.

Getting started with Bootstrap is incredibly easy – just download the source code (choose Minified unless you want to read the entire CSS) and add the appropriate CSS and JS files to your HTML templates. Store your customizations (LESS or CSS) in a new stylesheet, and then use the Customizer tool to remove unwanted features, components or assets to keep the final code as lean as possible.

More detailed customizations obviously will require more complexity and time to implement, but the basic process is quite straightforward. Many developers have created Bootstrap-friendly components on GitHub as well.

For developers seeking new options in working with web interfaces, Bootstrap is certainly something to investigate, particularly with this new version now available. The flexibility it affords makes it well worth consideration.