Sep 10 2013

A Look At Twitter Bootstrap 3

The folks behind the popular Bootstrap framework recently announced the release of Bootstrap 3. Since its original release two years ago, Bootstrap has grown into an indispensable tool for scores of developers, and while it’s a tool for rapid prototyping, it’s also on the front end of thousands of production websites.

Let’s take a look at Bootstrap’s features and see what’s new since version 2.

Get Bootstrap

Before you can dive into Bootstrap, you have to download it, which may cause confusion right off the bat. When you first visit getbootstrap.com, you’ll see some basic navigation, a large title and subtitle, and a big “Download” button. If you click it, you’ll download a .zip archive from Github. Unzip it, and you’ll see quite a lot of files and folders.

It took me a while to figure out what I was even looking at. I saw the usual /js and /less folders, but what was all the other stuff?

Then it dawned on me that I was looking at a static Jekyll site. Once I ran ‘jekyll build' on the folder, it generated a /_gh_pages folder, which is a fully functional version of the Bootstrap documentation site. While certainly cool, I’m not sure that particular download should be the default. I can see novice users being completely baffled as to what to do with it.

However, once you click on “Getting Started“, there are links to a couple other download options, one of which is a pre-compiled and minified version of the Bootstrap CSS and JavaScript files, along with a folder for Glyphicon fonts. Unfortunately, there’s no download option to just grab the framework’s LESS, JavaScript and font files. You’ll have to download the whole shebang and grab what you need.

Mobile First

One of the biggest departures from previous versions of Bootstrap is the move to a “mobile first” approach to the CSS architecture. In other words, all baseline CSS targets the smallest screen sizes first, then scales up. With no media queries specified (or on browsers incapable of handling media queries), the browser will be served mobile style. This allows for a more future-proof application and ensures that mobile users will get the functionality they need without the overhead of larger desktop apps. Then, as you expand outward to larger devices, you can add in more functionality, larger images, etc.

The Grid

The new grid system in Bootstrap 3 appears to be quite good. Where the old system was pixel-based, the new one uses percentages for widths. This aids in responsive design and makes it easier to recalculate column and gutter widths.

I’ve mentioned previously that I like how Foundation‘s grids have two breakpoint-based classes, so that you can add a column and specify two different widths based on screen size. Turns out, Bootstrap 3 has four of them:

  • Extra-small for phones (less than 768px)
  • Small for tablets (768px and up)
  • Medium for desktops (992px and up)
  • Large for ludicrous size (1200px and up)

So if you want a row that spans two columns on desktop, but stacks the columns on a phone, you might write something like this:

<div class="row">
	<div class="col-xs-12 col-md-6">Column One</div>
	<div class="col-xs-12 col-md-6">Column Two</div>
</div>

Note that Bootstrap’s .row class does not have to be augmented by an additional .columns class, as Foundation’s does.

In addition, you can use similarly named breakpoint variables in your media queries, like so:

// Styles for 768px and up 
@media (min-width: @screen-sm) { ... }

The Bootstrap grid also has the usual support for offsetting, pushing and pulling columns for various layout solutions.

LESS? Really?

So far in my research into Bootstrap 3, the biggest head-scratcher has got to be the continued inclusion of LESS as its CSS preprocessor. While I don’t wish to start a war, I think it’s generally accepted that SASS is becoming the dominant player in this space. Having used SASS exclusively since I started using the Foundation framework, I was very hopeful that Bootstrap 3 would also adopt it. Alas, they’re sticking with LESS, which is unfortunate. Happily, SASS ports have already begun to appear.

That said, I do understand there are legitimate benefits to LESS, including its faster compile speed. Here’s one of the creators’ justification for continuing to stick with LESS in Bootstrap. I’m sure it was a tough decision, and likely one that favored ease of use over the additional power of SASS.

Browser Support

Bootstrap 3 supports the latest versions of the most common browsers: Chrome, Safari, Firefox, Opera. IE 8 and 9 are supported, with some exceptions: IE8 doesn’t support certain CSS3 properties, and  requires the use of something like Scott Jehl’s respond.js for media query support. (Note: Foundation 4 says it doesn’t support either IE7 or 8, but I think that at least media query support could be added with respond.js.)

CSS Components

In addition to its grid system, Bootstrap also includes some good baseline CSS and helper classes. There are typography styles and classes for blocks of code. It also comes with a nice array of table styles, including an interesting take on responsive tables. By wrapping a table in a .table-responsive class, once it’s scaled down to a certain point, the table is scrollable horizontally so you can still see every column, without them being crunched. The trick is that it’s not always apparent that the table is now scrollable horizontally, if scroll bars don’t show up automatically in your browser.

The framework also provides some pretty good form defaults. Stylistically, they’re nothing earth-shattering, but they provide a good starting point towards making usable forms. Additionally, there are some really nice-looking, flexible button presets.

There are also several helper classes, most of which are standard parts of other frameworks, such as .pull-left, pull-right, and .clearfix. They also include a cool helper class called .sr-only, which stands for “screen-reader-only”, and allows you to hide elements from sighted users offscreen while keeping them available to vision-impaired users.

Bootstrap also includes responsive utility classes to control when elements should be hidden or visible. For example, if there’s an element you’d like to have hidden on a phone display you’d use:

<div class="hidden-xs">

JavaScript Plugins

Bootstrap 3 includes 12 jQuery plugins:

  • Transitions
  • Modal
  • Dropdown
  • Scrollspy
  • Tab
  • Tooltip
  • Popover
  • Alert
  • Button
  • Collapse
  • Carousel
  • Affix

I won’t go over them here, but one very nice feature is that each  can be completely configured via data-attributes in the HTML, without having to write a single line of JavaScript. For example, to launch a modal dialog with a button:

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

…would be identical to:

$('#myModal').modal();

This makes it easier for more novice developers to implement plugins without having to do a lot of configuration in JavaScript. Note that Foundation 4 also supports configuration via data attributes, but not for all its plugins.

Bootstrap includes the usual plugin suspects, such as modals, tooltips and alerts. But it also includes some nifty stuff like Scrollspy, which tracks the scroll bar position of an object (or the whole page) and can update things like navigation highlights automatically.

Like Foundation, it also includes plugins for collapsing accordions and tabbed content. However, where Foundation has Bootstrap beat is the fact that these are part of the same plugin in Foundation and can be switched on the fly, for instance on device orientation change.

Overall, Bootstrap’s plugins seem useful and well-crafted, but they’re not terribly unique or groundbreaking. What they have going for them is their ease of configuration and that all public API methods are available and chainable, and the events for most plugins’ unique actions (like, show, hide, etc) are readily available.

The Verdict

All in all, Bootstrap 3 is a pretty solid, yet basic framework. There have been definite improvements over the last version, notably the move to mobile first and the improved grid system. I’ve not had a chance to build anything with it yet, but if one of the SASS conversions is any good, I may give it a try. I still think my framework of choice at this point is Foundation 4, but if I need something simple and lightweight, Bootstrap is a good option.

7 Comments

  1. Jason

    Hi Andrew,
    I’ve built a couple things, landing pages mostly, with bootstrap 2. Haven’t had a chance to play with 3 yet, so I appreciate the overview. I’m wondering if there’s a guide out there for making your site DO something, after you’ve got the front end all prettied up with bootstrap.

    For example, if I make a sweet form to capture data from potential wholesale customers, how can I then get that data in a secure way?

    Any pointers to any good tutorials/resources on form submission would be great! It’d be awesome if there was a bootstrap equivalent for back end stuff. If there is, I have not found it.

    Best,
    Jason

    • Jason,

      Thanks for the feedback! The first question I’d like to ask is whether you already have experience with any server-side languages such as PHP, Ruby, etc. I’d have to research some resources for building simple server-side form processors, but there are other, simpler options.

      The one that comes immediately to mind is a service called http://www.wufoo.com/. They have tools to build almost any type of form you can imagine, all of which can both record data and send responses. As a developer myself, I’m truly impressed with what the folks at Wufoo have built. Creating good, simple, accessible forms is an art form in itself, and they’ve absolutely nailed it.

      Thanks again,
      AJ

  2. jolly

    Have you looked at britesnow.com ‘s implementation for MVC within Bootstrap3? Looks pretty sweet.

  3. Venkat Raman P

    Hi,

    Currently we are re-defining our UI. I would expect my new look and feel should look like portlets (panels) in a window. I got to know how to do that. But all panels can be customized only vertical order. Can we have both vertical & horizontal aligned panels / boxes..?

  4. Mark Jones

    Unfortunately I’ve found that there isn’t a single Android tablet that I’ve owned which displays properly in Bootstrap. The 768px width is too wide for Android 7″ and 8″ tablets, which results in a very poor display as if it was a small mobile phone, always using screen-xs instead of screen-sm. I’ve seen questions before why Boostrap didn’t account for display in 16×9 Android tablets and causes a display problem but it seems as though they didn’t wish to address this in Bootstrap 3.

Leave a Comment

Join the discussion. Do not worry, your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>