migrating to v3.x
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.
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.
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 |
.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 |
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 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 |
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 |
Fixed-width input sizes | .input-mini .input-small .input-medium .input-large .input-xlarge .input-xxlarge |
Use .form-control and the grid system instead. |
block level form input | .input-block-level |
No direct equivalent, but forms controls are similar. |
Inverse buttons | .btn-inverse |
N/A |
fluid row | .row-fluid |
.row (no more fixed grid) |
Control wrapper | .controls |
N/A |
Control 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-group s are similar. |
Inline help for form controls | .help-inline |
No exact equivalent, but .help-block similar. |
Non-bar-level progress colors | .progress-info .progress-success .progress-warning .progress-danger |
Use .progress-bar-* on the .progress-bar instead. |
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 (eg .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. Also, you should no longer apply .hide
to .modal
in your markup.remote
modal option is now injected into the .modal-content
(from v3.0.0 to v3.0.3, 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.data-toggle="buttons"
instead of data-toggle="buttons-checkbox"
or data-toggle="buttons-radio"
in their markup.'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 .