Migrating from Bootstrap 2 to Bootstrap 3? Let’s make your Job Simple!

We just finished transforming one of our extension Quick2Cart from Bootstrap 2 to Bootstrap 3. It was a fun task to do. We thought of sharing some of the migration stuff with you.

Before starting the migration

You need to learn Bootstrap 3 coding standard, what’s new, what’s removed, major class changes.

To know everything, please go through the following guidelines and documentation links.

1. Download the latest version bootstrap version from http://getbootstrap.com/ and replace the css and js files with the newest versions or use CDN http://www.bootstrapcdn.com/
2. To migrate your html to Bootstrap 3 style, first of all you have to  go through the following documentations
   a. Bootstrap 3.x version 
   b. Guidance on how to upgrade from Bootstrap v2.x to v3.x with emphasis on major changes, what's new, and what's been removed.
   c. Bootstrap Upgrader http://code.divshot.com/bootstrap3_upgrader/ orhttp://upgrade-bootstrap.bootply.com/

Well, you might spend a lot of time on the documents which Bootstrap has given, to make your job simple and reduce your work to an extent you will have to use this “search and replace script”

Steps for using the script:

1. Open terminal (ALT + CLT + T in Ubuntu)
2. Browse to your code directory $ cd /var/www/html/bootstrap2code
3. Now execute following search and replace scripts in the terminal one after another

grep "row-fluid" -rl * | xargs sed -i "s/row-fluid/row/g"
grep "control-group" -rl * | xargs sed -i "s/control-group/form-group/g";
grep "control-label" -rl * | xargs sed -i "s/control-label/col-lg-2 col-md-2 col-sm-3 col-xs-12 control-label/g";
grep "controls" -rl * | xargs sed -i "s/controls/col-lg-10 col-md-10 col-sm-9 col-xs-12/g";

grep "btn " -rl * | xargs sed -i "s/btn /btn btn-default/g"
grep "btn-mini" -rl * | xargs sed -i "s/btn-mini/btn-xm/g";
grep "btn-small" -rl * | xargs sed -i "s/btn-small/btn-sm/g";
grep "btn-large" -rl * | xargs sed -i "s/btn-large/btn-lg/g";

grep "input-prepend" -rl * | xargs sed -i "s/input-prepend/input-group/g";
grep "input-append" -rl * | xargs sed -i "s/input-append/input-group/g";

grep "add-on" -rl * | xargs sed -i "s/add-on/input-group-addon/g";

grep "checkbox.inline" -rl * | xargs sed -i "s/checkbox.inline/checkbox-inline/g";
grep "radio.inline" -rl * | xargs sed -i "s/radio.inline/radio-inline/g";

grep "offset" -rl * | xargs sed -i "s/btn-large/btn-lg/g";
grep "alert-error" -rl * | xargs sed -i "s/alert-error/alert-danger/g";

grep "visible-phone" -rl * | xargs sed -i "s/visible-phone/visible-xs/g";
grep "visible-desktop" -rl * | xargs sed -i "s/visible-desktop/visible-md visible-lg/g";

grep "hidden-phone" -rl * | xargs sed -i "s/hidden-phone/hidden-xm/g";
grep "hidden-phone" -rl * | xargs sed -i "s/hidden-phone/hidden-xs/g";
grep "hidden-tablet" -rl * | xargs sed -i "s/hidden-tablet/hidden-sm/g";
grep "hidden-desktop" -rl * | xargs sed -i "s/hidden-desktop/hidden-md hidden-lg/g";

grep "accordion " -rl * | xargs sed -i "s/accordion /panel-group /g";
grep "accordion-group " -rl * | xargs sed -i "s/accordion-group /panel .panel-default /g";
grep "accordion-heading " -rl * | xargs sed -i "s/accordion-heading /panel-heading /g";
grep "accordion-body " -rl * | xargs sed -i "s/accordion-body /panel-collapse /g";
grep "accordion-inner " -rl * | xargs sed -i "s/accordion-inner /panel-body /g";

grep "img-polaroid" -rl * | xargs sed -i "s/img-polaroid/img-thumbnail/g";
grep "label " -rl * | xargs sed -i "s/label /label label-default /g";
grep "label-important" -rl * | xargs sed -i "s/label-important/label-danger/g";
grep "muted" -rl * | xargs sed -i "s/muted/text-muted/g";
grep "bar" -rl * | xargs sed -i "s/bar/progress-bar/g";

grep "\"form-actions" -rl * | xargs sed -i "s/\"form-actions/\"/g";

 

Along with above three replacement you have to consider the following changes

Change this (Bootstrap 2.x)

to this (Bootstrap 3.x)

This is just a small portion of the entire chunk of work that needs to be done!

We hope, this helps you all to quite an extent in this big migration task

I would also like to share the references using which it was possible for me to write this search and replace script.

References:

1. http://getbootstrap.com/migration/

2. http://code.divshot.com/bootstrap3_upgrader/

3. http://upgrade-bootstrap.bootply.com/

4. http://stackoverflow.com/questions/17974998/updating-bootstrap-to-version-3-what-do-i-have-to-do

Do let us know your views on this. :)