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

by

  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.

More Related Contents:

  1. Bootstrap 3 Navbar Collapse
  2. Five equal columns in twitter bootstrap
  3. Bootstrap Rows and Columns – Do I need to use row?
  4. What is the difference between Bootstrap .container and .container-fluid classes?
  5. Responsive website zoomed out to full width on mobile
  6. Bootstrap with jQuery Validation Plugin
  7. Bootstrap Fluid grid system with different height
  8. How to remove responsive features in Twitter Bootstrap 3?
  9. Bootstrap – row can I have columns add up to more then 12?
  10. Bootstrap 3 breakpoints and media queries
  11. Stacked Tabs in Bootstrap 3
  12. Bootstrap 3 – Why is row class is wider than its container?
  13. How do you make Twitter Bootstrap Accordion keep one group open?
  14. bootstrap 4 responsive utilities visible / hidden xs sm lg not working
  15. How to create a sticky left sidebar menu using bootstrap 3?
  16. How to use Twitter Bootstrap 3 for non-responsive site? [duplicate]
  17. BootStrap3 keep the dropdown menu open after click on the item
  18. Should I use Bootstrap from CDN or make a copy on my server?
  19. Bootstrap 3.0 – Fluid Grid that includes Fixed Column Sizes
  20. Bootstrap 3 Gutter Size
  21. What’s the tabindex=”-1″ in bootstrap for
  22. Bootstrap 3, 4 and 5 .container-fluid with grid adding unwanted padding
  23. Reduce the gutter (default 30px) on smaller devices in Bootstrap3?
  24. Different slide duration for each item on bootstrap 3.1 carousel
  25. How can I get my Twitter Bootstrap buttons to right align?
  26. Decreasing height of bootstrap 3.0 navbar
  27. Binding to Collapse event in Twitter Bootstrap 3
  28. Disable Bootstrap 3 navbar going 2 rows in medium viewport size
  29. How to justify navbar-nav in Bootstrap 3
  30. Bootstrap icons are loaded locally but not when online

Leave a Comment