How To Upgrade Bootstrap 2 To Twitter Bootstrap 3 Build

Introducing  Twitter Bootstrap 3 with it’s new advanced features

The  Twitter Bootstrap 3 framework is an awesome and  powerful tool to develop frontend user interfaces for web applications.  Twitter Bootstrap 3 is a simple and flexible HTML, CSS, JavaScript and jQuery plugins framework for popular user interface components. Bootstrap makes it easy to create good-looking web pages and web-apps, plus it has a ‘responsive grid’ built-in automatically to make designs compatible with mobile browsers (both tablets and smartphones).

 

bootstrap

A couple weeks  ago the developers of Bootstrap made a major update moving from 2.3.2 to version 3.32

Twitter Bootstrap 3 has major changes from all it’s past versions. It is a mobile-first framework  and makes your site “always responsive” by default, whatever you design or create will be mobile compatible or responsive.

Twitter Bootstrap 3 is one of the best CSS frameworks for building responsive website designs..

So now, take a look at the major difference between Bootstrap 2 vs Twitter Bootstrap 3.

Bootstrap 2
Span method is used to create columns.
It does not support mobile-first.
Container and Container-fluid class are used.
Bootstrap 2 meta tag:<meta name=”viewport” content =”width =device-width,initial-scale=1.0″>

Twitter Bootstrap 3
Col method is used to create columns.
It support mobile first framework.
They used container class.
Bootstrap 3 meta tag :<meta name =”viewport” content=width=device-width, initial- scale= “1.0”>

Note
If we want to update the legacy bootstrap build to  Twitter Bootstrap 3, we need to change the HTML code from span to col (columns) methodology. And for updating the legacy bootstrap build, we are going to update it as per “mobile first framework” by using bootstrap 3 mobile class (xs and sm).

 

Different versions of Ajax Library are used to enable the jQuery functionality in Bootstrap

 

***Ajax library update for bootstrap 2:

JQuery v1.7.1 jquery.co

Ajax library update for bootstrap 3

JQuery v1.9.0+ jquery.com (see: #2245299: minimum jQuery version is 1.9.0 for Bootstrap 3.1.1)

Note
The project page should be updated to point users to find the current minimum version of jQuery needed for the latest Bootstrap.

In legacy bootstrap 2, we use live or delegate method, and then we change the method to “ON” because after jQuery 1.9.1 the ‘live’ or” delegate” method is deprecated by “ON’ method.

 

GLYPHICONS

“Glyphicons ” is a library of properly prepared monochromatic icons and symbols, created with an emphasis on simplicity and easy orientation.

So, now these are the certain changes that have been made in the Glyphicons

In bootstrap 2, you have 140 icon glyphs in spirit form, available in dark gray (default) and white provided by Glyphicons.

glyphicons 3

In order to upgrade Bootstrap build you have to change the “glyphicon”. While the Twitter Bootstrap 3 has included 260 glyphs in font format from the Glyphicon Halfing Set.

 

For running Bootstrap website in IE

<!–[if lt IE 8]>

<link href=”css/bootstrap-ie7fix.min.css” rel=”stylesheet”>

<![endif]–>

Updating process:

  1. Adding bootstrap-responsive.css in your application.
  2. Twitter Bootstrap 3: The .container & .row classes are now fluid by default, so it does not use -row fluid or container fluid anymore in your 3x. markup.

Grid Migration

How to convert from a 2.x to 3.0 grid without any responsive changes.

  • replace .container-fluidwith .container.
  • replace .row-fluidwith .row.
  • replace .span*with .col-md-*

While the Twitter Bootstrap 3 large grid (.col-md) are similar to the 2.x (span) grid, non form containers do not utilise the new responsive improvements in Bootstrap 3. If you want to “get more responsive” use the col-xs (tiny),col sm-(small) and col-lg(large) classes for better scaling on smartphones and tablets. Now you can use 3 different grid sizes, to exclude the vertical stack on smaller sizes.

Navbar Migration

How to convert from a 2.x to 3.0 navbar

  • remove .navbar-inner
  • replace .brandwith .navbar-brand
  • wrap .navbar-brandand .navbar-toggle inside .navbar-header
  • add .navbar-navto .nav

So there are also some changes in Navbar migration. The “.brand” is replacing with the “navbar-brand”. It is used to define the links.

Modal Migration

How to convert from a 2.x to 3.0 modal

  • remove.hide from the .modal (it’s now hidden by default)
  • wrap.modal-header .modal-body .modal-footer inside .modal-content
  • wrap.modal-content inside .modal-dialog

Twitter Bootstrap 3 Migration Guide

You can use this block as a general migration guide to upgrading from v2.x to v3.0.

Major CSS Class Changes

bootstrap classes

A consistent design in  Twitter Bootstrap 3 is the use of “base” CSS class names that provide a default for elements. The following  table shows the CSS style changes between v2.x and v3.0.

Bootstrap 2.x Bootstrap 3.0
.container-fluid .container
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.visible-phone .visible-sm
.visible-tablet .visible-md
.visible-desktop .visible-lg
.hidden-phone .hidden-sm
.hidden-tablet .hidden-md
.hidden-desktop .hidden-lg
.input-small .input-sm
.input-large .input-lg
.input-prepend .input-group
.input-append .input-group
.add-on .input-group-addon
.btn-navbar .navbar-btn
.thumbnail .img-thumbnail
ul.inline .list-inline

You can see the above table, “container-fluid ” and “row-fluid”  classes are now container and row. There is no more “span”. There is now base column unit named “col-md” that is sized using “col-lg-“. So instead of span2, you’d now use col-lg-2. This also works for offsets, so offset is now col- md-offset and so on.
 

The elements in  Twitter bootstrap 3 which are removed by bootstrap 2

Below are those elements which have been released or changed in v3. For example, hero unit is removed from 2.x and added in 3.0 with its new name called jumbotron.

 Element Removed from 2.x 3.0 Equivalent
Hero Unit .hero-unit .jumbotron
Form actions .form-actions
Grid .span* .col-md-*
Fluid container .container-fluid .container (no more fixed grid)
Fluid row .row-fluid .row (no more fixed grid)
Icons .icon-* .glyphicon-*
Navbar button .btn-navbar .navbar-btn
Navbar inner .navbar-inner
Nav list .nav-list .list-group
Thumbnails .thumbnails .col-* and .thumbnail
Input append / prepend .input-append .input-prepend .add-on .input-group
Dropdown submenu .dropdown-submenu
Tab alignments .tabs-left .tabs-right .tabs-below
Form actions .form-actions N/A
Search form .form-search N/A
Form group with info .control-group.info N/A
Fluid container .container-fluid .container (no more fixed grid)
Fluid row .row-fluid .row (no more fixed grid)
Controls wrapper .controls N/A
Controls row .controls-row .row or .form-group
Navbar inner .navbar-inner N/A
Navbar vertical dividers .navbar .divider-vertical N/A
Dropdown submenu .dropdown-submenu N/A
Tab alignments .tabs-left .tabs-right.tabs-below N/A
Nav lists .nav-list .nav-header No direct equivalent, but list groups and .panel-groups are similar.

 

 Twitter bootstrap 3 Additional Information

  • Notes & Caveats
  • .input-*are 100% width. Wrap inputs inside <div class=’col-md-*’></div> to control input widths.
  • .badgeno longer has contextual (-success,-primary,etc..) classes
  • .btnmust also use .btn-default to get the ‘default’ button
  • .containerand .row are now fluid (percentage-based)
  • Images are not responsive by default. Use.img-responsive for fluid IMG size
  • Include.glyphicon base class in all icons (ie: .glyphicon .glyphicon-asterisk).

For updating to Twitter Bootstrap 3 and running a responsive website successfully in IE, we need to add the “Respond.js” to enable media query.

Feature Internet Explorer 8 Internet Explorer 9
border-radius  Not supported  Supported
box-shadow  Not supported  Supported
transform  Not supported  Supported, with -ms prefix
transition  Not supported
placeholder  Not supported

 

Major CSS Changes

Bootstrap 2.x Bootstrap 3.0
.container-fluid .container
.row-fluid .row
.span* .col-md-*
.offset* .col-md-offset-*
.brand .navbar-brand
.navbar .nav .nav .navbar-nav
.hero-unit .jumbotron
.icon-* .glyphicon .glyphicon-*
.btn .btn .btn-default
.btn-mini .btn-xs
.btn-small .btn-sm
.btn-large .btn-lg
.visible-phone .visible-sm
.visible-tablet .visible-md
.visible-desktop .visible-lg
.hidden-phone .hidden-sm
.hidden-tablet .hidden-md
.hidden-desktop .hidden-lg
.input-prepend .input-group
.input-append .input-group
.add-on .input-group-addon
.btn-navbar .navbar-btn
.thumbnail .img-thumbnail

Lightweight

Unlike version 2, all the icons are now contained in a separate CSS file. The CSS has been increased for performance as its size is approx 79kb. In CSS terms, the new Twitter Bootstrap 3 allows for easier customization by improving on inheritance and specificity. We don’t need to understand the fore mentioned, but realise that Twitter Bootstrap 3 does require more mark up in our HTML. In the end, it will means less customisation and CSS overrides to achieve what we want. Also, all the CSS classes for Twitter Bootstrap 3 are included in a single file.

For any doubts and queries, feel free to leave comments below. Remember to subscribe to our newsletter. Do share the tutorial if you think it’s worth it.

Cheers!

MORE AWESOME TUTORIALS