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

My first
experience with the latest version of Bootstrap was quite a shock, as I
converted an existing application built with Bootstrap 2.3.2 by simply updating
resource references (CSS and JavaScript) to the 3.0.0 versions. The net result
of these changes was a mangled site, which should not have been a surprise because this information is
clearly stated in the framework’s documentation. Yes, I read the documentation,
but I had to try it to see for myself.

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.

Figure A

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. 

Figure B

Grid based

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.

Browser
support

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