Web Development

Bootstrap 3 says mobile first, everything else later

Bootstrap provides a foundation for building full-featured, responsive web applications that should work on all platforms. Here's a first look at Bootstrap 3.0.0.

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

Bootstrap3Panel_082913.JPG

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

Bootstrap3Navbar_082913.JPG

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

About

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 productio...

0 comments

Editor's Picks