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

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

More info at: getbootstrap.com/css/#grid

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 info at: getbootstrap.com/css/#grid

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.

Form Structural Changes

Forms have undergone some major changes. Here's some of what needs to happen:

• form-search is gone, replace with form-inline
• Remove input-block-level as inputs are 100% width by default
• Replace help-inline with help-block as inline is no longer supported
• Change control-group to form-group
• Add column widths to horizontal form labels and controls
• Remove controls class
• Add form-control class to inputs and selects.
• Wrap checkboxes and radios in an extra
• Replace .radio.inline and .checkbox.inline with -inline instead

Hero Unit is now Jumbotron

The component formerly known as a Hero Unit is now a Jumbotron, so swap hero-unit for jumbotron.