Upgrade from Bootstrap 2.x to version 3.0

Excerpted from http://v3.bootcss.com/migration/

Bootstrap version 3 is not backwards compatible with the v2.x version. The following section is a general guide to upgrading from the v2.x version to the v3.0 version. To see more version updates, please click on the v3.0 new content.

Changes to the main class

The following table lists the style differences between the v2.0x version and the v3.0 version.

Bootstrap 2.x	Bootstrap 3.0
.row-fluid	.row
.span*	.col-md-*
.offset*	.col-md-offset-*
.brand	.navbar-brand
.navbar .nav	.navbar-nav
.nav-collapse	.navbar-collapse
.nav-toggle	.navbar-toggle
.btn-navbar	.navbar-btn
.hero-unit	.jumbotron
.icon-*	.glyphicon .glyphicon-*
.btn	.btn .btn-default
.btn-mini	.btn-xs
.btn-small	.btn-sm
.btn-large	.btn-lg
.alert	.alert .alert-warning
.alert-error	.alert-danger
.visible-phone	.visible-xs
.visible-tablet	.visible-sm
.visible-desktop	Split into.visible-md .visible-lg
.hidden-phone	.hidden-xs
.hidden-tablet	.hidden-sm
.hidden-desktop	Split into.hidden-md .hidden-lg
.input-block-level	.form-control
.control-group	.form-group
.control-group.warning .control-group.error .control-group.success	.form-group.has-*
.checkbox.inline.radio.inline	.checkbox-inline.radio-inline
.input-prepend.input-append	.input-group
.add-on	.input-group-addon
.img-polaroid	.img-thumbnail
ul.unstyled	.list-unstyled
ul.inline	.list-inline
.muted	.text-muted
.label	.label .label-default
.label-important	.label-danger
.text-error	.text-danger
.table .error	.table .danger
.bar	.progress-bar
.bar-*	.progress-bar-*
.accordion	.panel-group
.accordion-group	.panel .panel-default
.accordion-heading	.panel-heading
.accordion-body	.panel-collapse
.accordion-inner	.panel-body

What's new

We have added some new elements and have modified some of the existing elements. The new or modified styles are listed below.

Element	Description
Panels	.panel .panel-default.panel-body .panel-title .panel-heading .panel-footer.panel-collapse
List groups	.list-group.list-group-item .list-group-item-text.list-group-item-heading
Glyphicons	.glyphicon
Jumbotron	.jumbotron
Extra small Grid (<768PX)	.col-xs-*
Small Grid (≥768PX)	.col-sm-*
Medium Grid (≥992PX)	.col-md-*
Large Grid (≥1200px)	.col-lg-*
Responsive utility Classes (≥1200px)	.visible-lg.hidden-lg
Offsets	.col-sm-offset-*.col-md-offset-*.col-lg-offset-*
Push	.col-sm-push-*.col-md-push-*.col-lg-push-*
Pull	.col-sm-pull-*.col-md-pull-*.col-lg-pull-*
Input Height Sizes	.input-sm.input-lg
Input groups	.input-group.input-group-addon.input-group-btn
Form controls	.form-control.form-group
Button Group Sizes	.btn-group-xs.btn-group-sm.btn-group-lg
Navbar text	.navbar-text
Navbar Header	.navbar-header
Justified Tabs/pills	.nav-justified
Responsive images	.img-responsive
Contextual table Rows	.success.danger .warning .active.info
Contextual panels	.panel-success.panel-danger .panel-warning.panel-info
Modal	.modal-dialog.modal-content
Thumbnail image	.img-thumbnail
Well sizes	.well-sm.well-lg
Alert Links	.alert-link

What to delete

The elements listed below have been deleted or changed in the v3.0 version.

Element	removed from 2.x	3.0 equivalent
Form actions	.form-actions	N/A
Search form	.form-search	N/A
Form Group with Info	.control-group.info	N/A
Fixed-width Input Sizes	.input-mini.input-small .input-medium .input-large .input-xlarge.input-xxlarge	Use and the .form-control grid system instead.
Block Level form Input	.input-block-level	No direct equivalent, but forms controls is similar.
Inverse buttons	.btn-inverse	N/A
Fluid row	.row-fluid	.row(no more fixed grid)
Controls Wrapper	.controls	N/A
Controls row	.controls-row	.rowOr.form-group
Navbar Inner	.navbar-inner	N/A
Navbar Vertical Dividers	.navbar .divider-vertical	N/A
Dropdown submenu	.dropdown-submenu	N/A
Tab alignments	.tabs-left.tabs-right.tabs-below	N/A
pill-based tabbable Area	.pill-content	.tab-content
pill-based tabbable Area Pane	.pill-pane	.tab-pane
NAV lists	.nav-list.nav-header	No direct equivalent, but list groups and .panel-group S is similar.
Inline Help for form controls	.help-inline	No exact equivalent, but is .help-block similar.
Non-bar-level Progress Colors	.progress-info.progress-success .progress-warning.progress-danger	Use on the .progress-bar-* .progress-bar instead.

Additional considerations

Other changes in v3.0 is not immediately apparent. Base classes, key styles, and behaviors has been adjusted for flexibility and our mobile first approach. Here's a partial list:

• By default, the Text-based form controls now receive only minimal styling. For focus colors and rounded corners, apply the .form-control class in the element to style.
• text-based form controls with the .form-control class applied is now 100% wide by default. Wrap inputs inside to <div class="col-*"></div> control input widths.
• .badgeNo longer has contextual (-success,-primary,etc.) classes.
• .btnmust also use to .btn-default get the "Default" button.
• .rowis now fluid.
• Images is no longer responsive by default. Use the for .img-responsive fluid size.
• The icons, now .glyphicon , is now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk ).
• Typeahead has been dropped, in favor of using Twitter Typeahead.
• Modal markup has changed significantly. The .modal-header , .modal-body , and sections is now wrapped on and for .modal-footer .modal-content .modal-dialog better mobile styling and behavior. Also, should no longer apply to .hide in .modal your markup.
• As of v3.1.0, the HTML loaded by the remote modal option was now injected into .modal-content the (from v3.0.0 to v3.0.3, into the ) instead of into the .modal-body . This allows-also easily vary the header and footer of the modal, not just the modal body.
• The checkbox and radio features of the Button.js plugin now both use data-toggle="buttons" instead of data-toggle="buttons-checkbox" or in data-toggle="buttons-radio" their markup.
• JavaScript events is namespaced. For example, to handle the modal ' show ' event, use ‘show.bs.modal‘ . For tabs ' shown ' use ‘shown.bs.tab‘ , etc.

For more information in upgrading to v3.0, and code snippets from the community, see bootply.

• Changes to the main class
• What's new
• What to delete
• Additional considerations

Back to Top

Upgrade from Bootstrap 2.x to version 3.0