Chapter 1: Migrating from Version 2 to Version 3

So what's involved in migrating from Bootstrap 2 to Bootstrap 3? In truth, not a great deal.

Despite the many changes, there's still not a huge amount for you to actually change, and the changes you do need to make are generally just class renames where applicable.

One of the things you might want to do, especially if you've been using BS only for general web app development and not mobile or any kind of responsive design, is to disable the responsive features in BS3.

This is easy enough to do, but not at all recommended.

You can achieve this as follows:

  • Do not add the meta tag containing the device width and other initial sizing info to the head of your document.
  • Do override the width on your elements that are marked up with a class of container, and make sure you use style='width: xxx !important' when you do so.
  • Do make sure that any width overrides are processed AFTER the main Bootstrap CSS rules have been loaded.
  • Do remove ALL collapsing and expanding behaviors and rules from ALL navbar constructs within your document.
  • Do change all grid layout classes to use ONLY col-xs-* classes and none of the other four levels.

If you’re targeting IE8 and IE9, you will still need to make sure you use respond.js, even if you do disable responsiveness as outlined.

Class Changes

As I mentioned earlier, there have been many class name changes between the two versions, and many classes have been deprecated and withdrawn.

One thing that will (and already has if you look at Stack Overflow) come as a surprise to many is the withdrawal of the fluid width classes.

In version 2, if you wanted a full-width elastic container, then you had to do something like the following:

<div class="container-fluid" id="myParentContainer">
  <div class="row-fluid" id="mycontentrow">
    <h1>A headline</h1>
    <p>Some paragraph text</p>
  </div>
</div>

Code Sample 1:Version 2 Flexible Container

In version 3 the container and row-fluid classes no longer exist.

So how do you get a fluid container? Simple: you don't.

Rather than wrap your contents in a container and then a row, you simply don’t wrap them in anything.

You can still use the grid system to provide enclosing containers for your content, so that things line up nicely with Bootstrap’s grid, but you no longer need to put a container around those collections of <div> elements before you use them.

In fact, if you use container and row (the non-fluid versions still exist) then you'll end up with all your content being in the 1024-pixel, central column automatically, and be able to use the entire page width if you do not.