The web-frontend framework Bootstrap streamlines the building of a responsive web application by providing almost everything you need. Previous versions of Bootstrap started with desktop clients and downgraded the interface for smaller, mobile clients. Bootstrap has flipped this approach beginning with the current release (v3.0.0) by being mobile first. So, sites built with the current Bootstrap version (and beyond) target mobile devices and scale for larger screens depending on screen size.
Not backward compatible
The reason the latest version is not backward compatible is a number of class changes. The most notable changes include the removal of the fluid classes (.container-fluid and .row-fluid) that were used to build responsive interfaces. With Bootstrap 3.0.0, sites are responsive by default, but there is an option to disable that feature. Gone are the days of pixel width pages — say hello to percentage-based layouts going forward. Other changes that caused problems include the removal of search form controls (.form-actions and .form-search) and the .navbar-inner class.
There are too many class changes to cover here, but the online documentation provides all the necessary details as well as 3.0.0 equivalent features (where available). In addition, the official Bootstrap blog post announcing the new version contains useful information.
Lots of new features
New classes and features have been added to the framework. One new feature that I am using on the site I am rebuilding is the panel component (Figure A), which allows you to place a panel of information (with optional header and footer) on the page. The panel may include a border, customer color scheme as well as being collapsible. In addition, there are classes for list groups, new form controls, and thumbnail images.
The navbar class has been overhauled with options to use a fixed navbar that is always visible at the top of the page or a static navbar along with being justified (Figure B). There are a number of online examples (I assume Bootstrap will continue to add more examples) that provide a good feel for how things work.
Bootstrap 3.0.0 uses a grid-based system for layout and presentation. It includes four grid classes that target different devices: desktops (regular and large), phones, and tablets. These classes can be used to deliver content/layout based on the device or grid. Bootstrap 3.0.0 promises an overall better flow and sizing, but I haven't seen enough sites that use it to verify this claim.
The documentation for Bootstrap 3.0.0 has been updated and expanded, and it's very easy to find information. The documentation on the features and classes is great, while the details about browser support and workarounds is interesting. For instance, Bootstrap no longer supports Internet Explorer 7 and Firefox 3.6, and there are issues with Internet Explorer 8 through 10 as well as other browsers; the documentation includes details about how to make your sites work best with these browsers.
The documentation also has a nice section (with links) on accessibility.
Upgrading from a previous version
The change to everything being responsive introduced many problems on older sites, and the revamped navbar includes great new features but required a lot of rework. So, when you upgrade or retrofit a site built with a previous version (or versions) of Bootstrap, you will need to make a number of changes.
Since Bootstrap 3.0 handles screen resolutions differently, I had to rewrite existing Bootstrap 2.3.2 code to utilize the new classes for client screen sizes, which can be customized for desktops, tablets, and phones. Other minor changes like the removal of search form and accordion classes required reworking.
It was a big shift for me to get in the mobile first mindset when developing a web application. I had been using the desktop as a starting point, but this is an industry and society shift that cannot be ignored. This was made clear when a client recently stated, "I don't want a separate design for mobile, but I do want the site to work on my iPhone."
An impressive starting point
Bootstrap provides a great foundation for building full-featured, responsive web applications that can, theoretically, work on all platforms. This does not happen automatically — you still have to design and build the application with platforms in mind, which requires thorough testing across the various clients to make sure everything works as planned. Check out BrowserStack for that part of the process.
Share your first impressions of Bootstrap 3.0.0 in the discussion.
Read more about Bootstrap on TechRepublic
Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a production environment on a daily basis.