Bootstrap 3: Migration Guide

This is a live guide to help you migrate from AlloyUI 2 (which uses Bootstrap 2) to AlloyUI 3 (which uses Bootstrap 3).

Bootstrap 3 is not backwards compatible with v2.x., so please check the official migration guide for detailed information.

Keep in mind that this is just a high level summary. And feel free to add more info.

Major Changes to the Grid

Bootstrap 3 still features a 12-column grid, but many of the CSS class names have completely changed:

container and row classes are now fluid by default so more need to use -fluid for the percentage based grid. Since there is now only one percentage-based grid, you would use a wrapper to create a fixed / pixel-based width.

There is no more span*. There is now base column unit named col that is sized using col-lg-*. So instead of span2 you’d now use col col-lg-2. This also works for offsets so offset* is now col-offset-*.

Make it “Mobile-First”

Where col-lg-* refers to the “large” grid there are now small device grids using col-sm-*. Use the small device grid classes, like .col-sm-6, to create columned layouts on phone and tablet devices (anything less than 768px).

More Base CSS Classes

A consistent design in Bootstrap 3 is the use of “base” CSS class names that provide a default for elements. Just about everything uses a base class such as col, btn, badge, progress, glyphicon, etc… Modifier classes are then used for variations on the base element such as btn btn-success.