Easy upgrade from Bootstrap 2 to 3

As we’ve seen in a previous tutorial Bootstrap 3 is a major overhaul compared to Bootstrap 2. So how do you upgrade your old Bootstrap 2 web pages to Bootstrap 3?

Fortunately there’s an online upgrade tool to do this for you.

Easy upgrade from Bootstrap 2 to 3

The upgrade tool scans your old Bootstrap 2 HTML code looking for class names. When it finds a class name that has been deprecated in Bootstrap 3 it replaces that class name with the correct class used in Bootstrap 3.

Because some of the Bootstrap components have also undergone changes the upgrade tool also specifically scans your code for these components (Navbar, Modal, Hero, etc.) and converts them into the proper code used in Bootstrap 3. Below you can see an example of a simple Bootstrap 2 Navbar:

With the upgrade tool the code above is converted into:

You will have noticed a couple of changes:

  • Where the first div in Bootstrap 2 only had the class navbar this div in Bootstrap 3 also has the class navbar-default.
  • The third div with class “nav” also gets an extra class in Bootstrap 3: navbar-nav.
  • Between these two div’s (highlighted, line 2) you see that the div with class navbar-inner has been converted into a div with class navbar-header. In our Bootstrap 3 markup this div is empty. The reason for this is that in Bootstrap 3 the div with “navbar-header” is used to create the ‘icon’ indicating a responsive menu. Our Bootstrap 2 Navbar was not intended as a responsive menu. And that is why it’s empty.

The Navbar example above shows us how the upgrade tool corrects our old Bootstrap 2 code. But we also learn that we have to check to result. If a component has undergone other changes from Bootstrap 2 to Bootstrap 3 besides different class names we need to insert these manually.

Steps to upgrade your code

When you open the Bootstrap 3 upgrade tool you can insert your old code into the first field and then click on the blue button to convert it into proper Bootstrap 3 code:

Bootstrap 3 upgrade tool screenshot showing the two input fields

As you can see in the image above the first input field will show a div with class container-fluid. You can insert your code between the two div tags. The class container-fluid will then be replaced by class container in the Bootstrap 3 result. In Bootstrap 3 a container div is always fluid/responsive so the distinction made with class container-fluid is no longer relevant in Bootstrap 3.

When you want to upgrade an entire Bootstrap page you only insert the code between the body tags and not the head section. If you already used a container div in your old code make sure to either replace the container-fluid tags in the upgrade tool with your own code or to insert your code without its container tags.

The upgrade tool also has the option to show a preview of how your Bootstrap 3 code will be rendered in a browser. When you click on the blue preview button a new window will open. This window will show your code using Bootply. Bootply has some other interesting options but we’ll not discuss those here because in this tutorial I only wanted to show you the upgrade tool.

Add your comment