{"id":617,"date":"2013-12-10T15:49:40","date_gmt":"2013-12-10T10:19:40","guid":{"rendered":"http:\/\/www.prasadk.com\/my-press\/?p=617"},"modified":"2013-12-10T17:57:22","modified_gmt":"2013-12-10T12:27:22","slug":"bootstrap-migrating-from-2-x-to-3-0","status":"publish","type":"post","link":"https:\/\/www.prasadk.com\/my-press\/bootstrap-migrating-from-2-x-to-3-0\/","title":{"rendered":"Bootstrap Migrating from 2.x to 3.0"},"content":{"rendered":"

Bootstrap Migrating from 2.x to 3.0<\/h2>\n

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<\/a>.<\/strong><\/p>\n

Major class changes<\/strong>
\nThis table shows the style changes between v2.x and v3.0.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Bootstrap 2.x<\/th>\nBootstrap 3.0<\/th>\n<\/tr>\n<\/thead>\n
.container-fluid<\/code><\/td>\n.container<\/code><\/td>\n<\/tr>\n
.row-fluid<\/code><\/td>\n.row<\/code><\/td>\n<\/tr>\n
.span*<\/code><\/td>\n.col-md-*<\/code><\/td>\n<\/tr>\n
.offset*<\/code><\/td>\n.col-md-offset-*<\/code><\/td>\n<\/tr>\n
.brand<\/code><\/td>\n.navbar-brand<\/code><\/td>\n<\/tr>\n
.nav-collapse<\/code><\/td>\n.navbar-collapse<\/code><\/td>\n<\/tr>\n
.nav-toggle<\/code><\/td>\n.navbar-toggle<\/code><\/td>\n<\/tr>\n
.btn-navbar<\/code><\/td>\n.navbar-btn<\/code><\/td>\n<\/tr>\n
.hero-unit<\/code><\/td>\n.jumbotron<\/code><\/td>\n<\/tr>\n
.icon-*<\/code><\/td>\n.glyphicon .glyphicon-*<\/code><\/td>\n<\/tr>\n
.btn<\/code><\/td>\n.btn .btn-default<\/code><\/td>\n<\/tr>\n
.btn-mini<\/code><\/td>\n.btn-xs<\/code><\/td>\n<\/tr>\n
.btn-small<\/code><\/td>\n.btn-sm<\/code><\/td>\n<\/tr>\n
.btn-large<\/code><\/td>\n.btn-lg<\/code><\/td>\n<\/tr>\n
.alert-error<\/code><\/td>\n.alert-danger<\/code><\/td>\n<\/tr>\n
.visible-phone<\/code><\/td>\n.visible-xs<\/code><\/td>\n<\/tr>\n
.visible-tablet<\/code><\/td>\n.visible-sm<\/code><\/td>\n<\/tr>\n
.visible-desktop<\/code><\/td>\nSplit into .visible-md .visible-lg<\/code><\/td>\n<\/tr>\n
.hidden-phone<\/code><\/td>\n.hidden-xs<\/code><\/td>\n<\/tr>\n
.hidden-tablet<\/code><\/td>\n.hidden-sm<\/code><\/td>\n<\/tr>\n
.hidden-desktop<\/code><\/td>\nSplit into .hidden-md .hidden-lg<\/code><\/td>\n<\/tr>\n
.input-small<\/code><\/td>\n.input-sm<\/code><\/td>\n<\/tr>\n
.input-large<\/code><\/td>\n.input-lg<\/code><\/td>\n<\/tr>\n
.control-group<\/code><\/td>\n.form-group<\/code><\/td>\n<\/tr>\n
.control-group.warning .control-group.error .control-group.success<\/code><\/td>\n.form-group.has-*<\/code><\/td>\n<\/tr>\n
.checkbox.inline<\/code> .radio.inline<\/code><\/td>\n.checkbox-inline<\/code> .radio-inline<\/code><\/td>\n<\/tr>\n
.input-prepend<\/code> .input-append<\/code><\/td>\n.input-group<\/code><\/td>\n<\/tr>\n
.add-on<\/code><\/td>\n.input-group-addon<\/code><\/td>\n<\/tr>\n
.img-polaroid<\/code><\/td>\n.img-thumbnail<\/code><\/td>\n<\/tr>\n
ul.unstyled<\/code><\/td>\n.list-unstyled<\/code><\/td>\n<\/tr>\n
ul.inline<\/code><\/td>\n.list-inline<\/code><\/td>\n<\/tr>\n
.muted<\/code><\/td>\n.text-muted<\/code><\/td>\n<\/tr>\n
.label<\/code><\/td>\n.label .label-default<\/code><\/td>\n<\/tr>\n
.label-important<\/code><\/td>\n.label-danger<\/code><\/td>\n<\/tr>\n
.text-error<\/code><\/td>\n.text-danger<\/code><\/td>\n<\/tr>\n
.table .error<\/code><\/td>\n.table .danger<\/code><\/td>\n<\/tr>\n
.bar<\/code><\/td>\n.progress-bar<\/code><\/td>\n<\/tr>\n
.bar-*<\/code><\/td>\n.progress-bar-*<\/code><\/td>\n<\/tr>\n
.accordion<\/code><\/td>\n.panel-group<\/code><\/td>\n<\/tr>\n
.accordion-group<\/code><\/td>\n.panel .panel-default<\/code><\/td>\n<\/tr>\n
.accordion-heading<\/code><\/td>\n.panel-heading<\/code><\/td>\n<\/tr>\n
.accordion-body<\/code><\/td>\n.panel-collapse<\/code><\/td>\n<\/tr>\n
.accordion-inner<\/code><\/td>\n.panel-body<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

What’s new<\/h3>\n

Bootstrap added new elements and changed some existing ones. Here are the new or updated styles.<\/strong><\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Element<\/th>\nDescription<\/th>\n<\/tr>\n<\/thead>\n
Panels<\/td>\n.panel .panel-default<\/code> .panel-body<\/code> .panel-title<\/code> .panel-heading<\/code> .panel-footer<\/code> .panel-collapse<\/code><\/td>\n<\/tr>\n
List groups<\/td>\n.list-group<\/code> .list-group-item<\/code> .list-group-item-text<\/code> .list-group-item-heading<\/code><\/td>\n<\/tr>\n
Glyphicons<\/td>\n.glyphicon<\/code><\/td>\n<\/tr>\n
Jumbotron<\/td>\n.jumbotron<\/code><\/td>\n<\/tr>\n
Extra small grid (<768px)<\/td>\n.col-xs-*<\/code><\/td>\n<\/tr>\n
Small grid (\u2265768px)<\/td>\n.col-sm-*<\/code><\/td>\n<\/tr>\n
Medium grid (\u2265992px)<\/td>\n.col-md-*<\/code><\/td>\n<\/tr>\n
Large grid (\u22651200px)<\/td>\n.col-lg-*<\/code><\/td>\n<\/tr>\n
Responsive utility classes (\u22651200px)<\/td>\n.visible-lg<\/code> .hidden-lg<\/code><\/td>\n<\/tr>\n
Offsets<\/td>\n.col-sm-offset-*<\/code> .col-md-offset-*<\/code> .col-lg-offset-*<\/code><\/td>\n<\/tr>\n
Push<\/td>\n.col-sm-push-*<\/code> .col-md-push-*<\/code> .col-lg-push-*<\/code><\/td>\n<\/tr>\n
Pull<\/td>\n.col-sm-pull-*<\/code> .col-md-pull-*<\/code> .col-lg-pull-*<\/code><\/td>\n<\/tr>\n
Input groups<\/td>\n.input-group<\/code> .input-group-addon<\/code> .input-group-btn<\/code><\/td>\n<\/tr>\n
Form controls<\/td>\n.form-control<\/code> .form-group<\/code><\/td>\n<\/tr>\n
Button group sizes<\/td>\n.btn-group-xs<\/code> .btn-group-sm<\/code> .btn-group-lg<\/code><\/td>\n<\/tr>\n
Navbar text<\/td>\n.navbar-text<\/code><\/td>\n<\/tr>\n
Navbar header<\/td>\n.navbar-header<\/code><\/td>\n<\/tr>\n
Justified tabs \/ pills<\/td>\n.nav-justified<\/code><\/td>\n<\/tr>\n
Responsive images<\/td>\n.img-responsive<\/code><\/td>\n<\/tr>\n
Contextual table rows<\/td>\n.success<\/code> .danger<\/code> .warning<\/code> .active<\/code><\/td>\n<\/tr>\n
Contextual panels<\/td>\n.panel-success<\/code> .panel-danger<\/code> .panel-warning<\/code> .panel-info<\/code><\/td>\n<\/tr>\n
Modal<\/td>\n.modal-dialog<\/code> .modal-content<\/code><\/td>\n<\/tr>\n
Thumbnail image<\/td>\n.img-thumbnail<\/code><\/td>\n<\/tr>\n
Well sizes<\/td>\n.well-sm<\/code> .well-lg<\/code><\/td>\n<\/tr>\n
Alert links<\/td>\n.alert-link<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

<\/h2>\n

What’s removed<\/h2>\n

The following elements have been dropped or changed in v3.0.<\/p>\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
Element<\/th>\nRemoved from 2.x<\/th>\n3.0 Equivalent<\/th>\n<\/tr>\n<\/thead>\n
Form actions<\/td>\n.form-actions<\/code><\/td>\nN\/A<\/td>\n<\/tr>\n
Search form<\/td>\n.form-search<\/code><\/td>\nN\/A<\/td>\n<\/tr>\n
Form group with info<\/td>\n.control-group.info<\/code><\/td>\nN\/A<\/td>\n<\/tr>\n
Fluid container<\/td>\n.container-fluid<\/code><\/td>\n.container<\/code> (no more fixed grid)<\/td>\n<\/tr>\n
Fluid row<\/td>\n.row-fluid<\/code><\/td>\n.row<\/code> (no more fixed grid)<\/td>\n<\/tr>\n
Controls wrapper<\/td>\n.controls<\/code><\/td>\nN\/A<\/td>\n<\/tr>\n
Controls row<\/td>\n.controls-row<\/code><\/td>\n.row<\/code> or .form-group<\/code><\/td>\n<\/tr>\n
Navbar inner<\/td>\n.navbar-inner<\/code><\/td>\nN\/A<\/td>\n<\/tr>\n
Navbar vertical dividers<\/td>\n.navbar .divider-vertical<\/code><\/td>\nN\/A<\/td>\n<\/tr>\n
Dropdown submenu<\/td>\n.dropdown-submenu<\/code><\/td>\nN\/A<\/td>\n<\/tr>\n
Tab alignments<\/td>\n.tabs-left<\/code> .tabs-right<\/code> .tabs-below<\/code><\/td>\nN\/A<\/td>\n<\/tr>\n
Nav lists<\/td>\n.nav-list<\/code> .nav-header<\/code><\/td>\nNo direct equivalent, but list groups and .panel-group<\/code>s are similar.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

Additional notes<\/h2>\n

Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our mobile first<\/em> approach. Here’s a partial list:<\/p>\n