Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Updating Bootstrap to version 3 - what do I have to do?

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?

like image 865
Henry Avatar asked Jul 31 '13 15:07

Henry


People also ask

How do I update Bootstrap?

In the platform, inside the site you want to update, click Templates. 2. Open the file bootstrap_js, there paste the javascript code of the latest version of bootstrap. Then you can decide which option fits your needs best.

Should I upgrade Bootstrap 3?

You should know that there is still support to continue using Bootstrap 3, but due to some changes that arose in the structure of Bootstrap 4 over its previous version, it is better to start developing or migrating our applications to this incredible new version.

Can I still use Bootstrap 3?

Starting today, Bootstrap 3 will move to end of life, and will no longer receive critical security updates. Bootstrap 4 will move to Long Term Support after we release v4. 4 and will no longer receive new features from then on.

What is difference in Bootstrap 3 and Bootstrap 4?

Bootstrap 3 has 4 tier grid system that includes xs, sm, md, and lg. Bootstrap 4 has 5 tier grid system that includes xs, sm, md, lg, and xl.


4 Answers

  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)

    • Images not responsive by default in Twitter Bootstrap 3?
    • Styling Twitter's Bootstrap 3.x Buttons
    • Change navbar color in Twitter Bootstrap 3
  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.

like image 196
14 revs, 3 users 66% Avatar answered Oct 14 '22 10:10

14 revs, 3 users 66%


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

like image 32
Zim Avatar answered Oct 14 '22 09:10

Zim


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 ....

like image 35
albanx Avatar answered Oct 14 '22 09:10

albanx


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

like image 26
Ramesh Avatar answered Oct 14 '22 10:10

Ramesh