Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see what's new in the v3.0 release announcement.
- -This table shows the style changes between v2.x and v3.0.
-| Bootstrap 2.x | -Bootstrap 3.0 | -
|---|---|
.row-fluid |
- .row |
-
.span* |
- .col-md-* |
-
.offset* |
- .col-md-offset-* |
-
.brand |
- .navbar-brand |
-
.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-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-small |
- .input-sm |
-
.input-large |
- .input-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 |
-
We've added new elements and changed some existing ones. Here are the new or updated styles.
-| 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 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 |
-
| 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 |
-
The following elements have been dropped or changed in v3.0.
-| 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 | -
| Block level from input | -.input-block-level |
- No direct equivalent, but forms controls are similar. | -
| Fluid row | -.row-fluid |
- .row (no more fixed grid) |
-
| Controls wrapper | -.controls |
- N/A | -
| Controls row | -.controls-row |
- .row or .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-groups are similar. |
-
Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:
-.form-control class on the element to style..form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths..badge no longer has contextual (-success,-primary,etc..) classes..btn must also use .btn-default to get the "default" button..row is now fluid..img-responsive for fluid <img> size..glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk)..modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior.remote modal option is now injected into the .modal instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc.For more information on upgrading to v3.0, and code snippets from the community, see Bootply.
+ +Looking to migrate from an older version of Bootstrap to v3.x? Check out our migration guide.
Bootstrap 3 is not backwards compatible with v2.x. Use this section as a general guide to upgrading from v2.x to v3.0. For a broader overview, see what's new in the v3.0 release announcement.
+ +This table shows the style changes between v2.x and v3.0.
+| Bootstrap 2.x | +Bootstrap 3.0 | +
|---|---|
.row-fluid |
+ .row |
+
.span* |
+ .col-md-* |
+
.offset* |
+ .col-md-offset-* |
+
.brand |
+ .navbar-brand |
+
.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-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-small |
+ .input-sm |
+
.input-large |
+ .input-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 |
+
We've added new elements and changed some existing ones. Here are the new or updated styles.
+| 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 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 |
+
| 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 |
+
The following elements have been dropped or changed in v3.0.
+| 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 | +
| Block level from input | +.input-block-level |
+ No direct equivalent, but forms controls are similar. | +
| Fluid row | +.row-fluid |
+ .row (no more fixed grid) |
+
| Controls wrapper | +.controls |
+ N/A | +
| Controls row | +.controls-row |
+ .row or .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-groups are similar. |
+
Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first approach. Here's a partial list:
+.form-control class on the element to style..form-control class applied are now 100% wide by default. Wrap inputs inside <div class="col-*"></div> to control input widths..badge no longer has contextual (-success,-primary,etc..) classes..btn must also use .btn-default to get the "default" button..row is now fluid..img-responsive for fluid <img> size..glyphicon, are now font based. Icons also require a base and icon class (e.g. .glyphicon .glyphicon-asterisk)..modal-header, .modal-body, and .modal-footer sections are now wrapped in .modal-content and .modal-dialog for better mobile styling and behavior.remote modal option is now injected into the .modal instead of into the .modal-body. This allows you to also easily vary the header and footer of the modal, not just the modal body.'show.bs.modal'. For tabs "shown" use 'shown.bs.tab', etc.For more information on upgrading to v3.0, and code snippets from the community, see Bootply.
+