102

I'm new to Bootstrap and have the older version 2.3.2.

Version 3 has been released. Do I just simply replace the CSS and Javascript files if I want to use the latest version?

Jean-François Corbett
  • 37,420
  • 30
  • 139
  • 188
Henry
  • 5,195
  • 7
  • 21
  • 34
  • You might want to read up on the changes and make sure they don't break anything you already have in place, but yes simply replace the files – Patsy Issa Jul 31 '13 at 15:50
  • Yes, I just want to make sure that I am doing this correctly. I think that Bootstrap has been the best thing ever - its amazing. I'm keen to use the next version. I am sure I was reading somewhere that use can use .less to manage updates but I am probably wrong with that. – Henry Jul 31 '13 at 18:44
  • 1
    possible duplicate of [Writing Twitter's Bootstrap with upgrading to v3 in mind](http://stackoverflow.com/questions/17797017/writing-twitters-bootstrap-with-upgrading-to-v3-in-mind) – Bass Jobsen Aug 01 '13 at 14:16
  • Note that even though the docs say everything's "fluid" in 3.0, it still uses fixed pixel widths for containers...which is kind of dumb as that's the exact opposite of fluid layout. – Cerin Oct 03 '13 at 18:10

8 Answers8

134

  1. Download the latest version from http://getbootstrap.com/ OR Replace the css and js files with the newest versions or use CDN (http://www.bootstrapcdn.com/)

  2. Migrate your html, yes indeed read http://bootply.com/bootstrap-3-migration-guide. You could try http://twitterbootstrapmigrator.w3masters.nl/ or http://code.divshot.com/bootstrap3_upgrader/ (provide checklist too)

  3. remove html5shiv cause TB drops support for IE7 and Firefox 3.x add html5shiv.js to add support of HTML5 elements to IE8

  4. add respond.js (https://github.com/scottjehl/Respond) for media query support in IE. NOTE this won't work with CDN, see: IE8 issue with Twitter Bootstrap 3

  5. If you use Glyphicons, you will have to add them from http://glyphicons.getbootstrap.com/ ( icons have been moved to a separate repository.) Glyphicons are back since RC2 (180 glyphs in font format from the Glyphicon Halflings set)

  6. If you use the Javascript Typeahead component, you will have to integrate https://github.com/twitter/typeahead.js/ (cause typeahead javascript is dropped) See also: Typeahead problems with Bootstrap 3.0 RC1 Or use the "old" plugin: https://github.com/bassjobsen/Bootstrap-3-Typeahead, see also: https://stackoverflow.com/questions/18615964/ajax-call-in-bootstrap-3-0-typeahead/18620473

  7. Switch to the latest version of jQuery 1.x (don't use the 2.x version cause jQuery 2.x don't support IE8)

  8. If you use third party widgets which adds or insert html to your code (like addthis.com, sharethis.com and Google maps), create a wrapper for the box-sizing, see: Right border of the AddThis counter missing with Twitter's Bootstrap 3

Other:

Bootstrap 3 switch to box-sizing: border-box why?: https://stackoverflow.com/a/18858771/1596547

Note support for IE7 has been dropped. https://github.com/coliff/bootstrap-ie7 try to add the css part back with use of some conditional CSS.

Community
  • 1
  • 1
Bass Jobsen
  • 48,736
  • 16
  • 143
  • 224
  • That sounds like a huge undertaking. How long should this take? 1 week of work? 1 month? 6 months? – Curt Feb 02 '16 at 21:26
  • the problem is that BS2 is not backwards compatible with BS3, see also http://bassjobsen.weblogs.fm/its-a-shame-the-newest-version-of-githubs-most-popular-projects-is-not-backward-compatible/ – Bass Jobsen Feb 04 '16 at 15:07
  • 1
    If I had to guess, I would say it can take a few months to upgrade. Brutal. – Curt Feb 05 '16 at 16:08
  • @Curt send me an e-mail. Maybe i can help you? – Bass Jobsen Feb 05 '16 at 23:22
  • How do I send you an e-mail? Through your Twitter handle? I read a little more of v3 and it seems that it is mainly to add support for older phones. If so, I do not think I need v3. – Curt Feb 07 '16 at 01:24
  • you can mail me at bassATw3masters.nl – Bass Jobsen Feb 07 '16 at 09:21
  • There's no reason to continue supporting IE7 and IE8. Let dead browsers die. – mbomb007 Nov 29 '18 at 22:08
22

Updated 2018

Bootstrap 3 to 4

Bootstrap 4 upgrade tool (this will help to migrate from Bootstrap 3 to 4)

Bootstrap 2 to 3

A release candidate (not the final release 3) for Bootstap 3 RC 1 was announced Friday (July 26 2013), so there is not yet any official migration guidance.

There are major changes for Bootstrap 3. There is no backwards compatibility with 2.x, so you can't just replace the files. You can however find some useful guidance here at Bootply:

http://bootply.com/bootstrap-3-migration-guide

There is also a Bootstrap migration tool in the works: https://github.com/iatek/bootstrap-migrate

Bootstrap 2.x to 3 upgrade tool: http://upgrade-bootstrap.bootply.com/v3

Carol Skelly
  • 351,302
  • 90
  • 710
  • 624
13

it is almost impossible to migrate from bootstrap 2.3 to 3.0. the version change is very drastic. I tried to update my zend framework 2 project with bootstrap 3.0 and the results was a mess (like trying to open with IE 5).

My advice: old project using bootstrap 2.X let with bootstrap 2.x. New starting project, start with 3.0.

In my opinion such version change was a very big error from bootstrap team. They should have done a gradual update 2.4, 2.5, 2.6 ....

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
albanx
  • 6,193
  • 9
  • 67
  • 97
  • 8
    I disagree with the almost impossible. It is entirely possible to migrate, you just need to follow the guidance provided. See the community wiki post for links. Also following semantic version numbers, a major upgrade is allowed to break interface contracts. So the major version number correctly represents this possible break. – Jafin Nov 01 '13 at 06:32
  • 1
    It's very difficult to migrate. I think this is advice is great. It's not impossible, but is difficult - nothing like upgrading from earlier versions of 2.* to another 2.*. – d-_-b Nov 10 '13 at 22:28
  • It's not impossible and made a lot easier if you can search/replace for patterns like `span12`. – tadman Nov 14 '13 at 20:57
  • 3
    I can ensure you that I made all possible replacement, even on separate css where I override boostrap default theme, and in the code, but I did not got a good result. Do not think about just span12, think about all span*, all navs, tables and more more, think about a heavy deep use of bootstrap – albanx Nov 15 '13 at 09:35
  • Bootstrap (like many web frameworks) follows [Semantic Versioning](http://semver.org/), hence the change from 2.* to 3 introducing incompatible API changes. – Jake Berger Jan 21 '14 at 04:29
  • I've done the upgrade fairly easily in a hand coded site - took 3 or 4 hours max. It is generally just a matter of replacing spanX with col-sm-X, say. It is worth it for the benefits you'll get (e.g. faster mobile performance) – niico Feb 02 '14 at 00:24
1

I just migrated to 3.0.3 and this python app https://pypi.python.org/pypi/b2tob3/0.4 made it pretty easy task.

Ramesh
  • 193
  • 1
  • 3
  • 7
0

I made a grunt plugin to automate upgrading bootstrap 2.3 to 3.0 html.

Check it out at https://github.com/jdewit/grunt-html-upgrader

jdewit
  • 966
  • 9
  • 10
0

It's not sure but use this rereplacer joomla extension

refer this link,

http://www.nonumber.nl/extensions/rereplacer

otherwise, Template overrides are the only way to do this.

Kumar Ramalingam
  • 349
  • 3
  • 15
0

Two online tools to Upgrade to Bootstrap 3:

FROM bootply

FROM divshot

令狐葱
  • 1,117
  • 12
  • 12
0

If you are having a big application with a lot of files with a lot of customization, every single tool likely that could not answer to most of the case you are facing.

First, of course, I recommend to try: https://pypi.python.org/pypi/b2tob3/0.4 but this won't answer to my need, I forked this version and adapt my own one to be able to migrate together Bootstrap 2 to 3 and Font Awesome 3 to 4 together, some cases that not treat in b23tob3-v0.4 (original one) are trying to treat in my version.

Read my post here: http://ask.osify.com/qa/589 Find my update in github: https://github.com/metrey/b2tob3 You can also find the compiled Windows app there as well to use right away.

ALWAYS backup your files and commit everything in to source control before using the tool.

Good luck and share your though.

Osify
  • 2,253
  • 25
  • 42