migration.html 16.39 KiB
---
layout: default
title: Migrating to v3.x
slug: migration
lead: "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."
---
<!-- Migration
================================================== -->
<div class="bs-docs-section">
  <h1 class="page-header">Migrating from 2.x to 3.0</h1>
  <p class="lead">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 <a href="http://blog.getbootstrap.com/2013/08/19/bootstrap-3-released/">what's new</a> in the v3.0 release announcement.</p>
  <h2 id="classes">Major class changes</h2>
  <p>This table shows the style changes between v2.x and v3.0.</p>
  <div class="table-responsive">
    <table class="table table-bordered table-striped">
      <thead>
        <tr>
          <th>Bootstrap 2.x</th>
          <th>Bootstrap 3.0</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td><code>.row-fluid</code></td>
          <td><code>.row</code></td>
        </tr>
        <tr>
          <td><code>.span*</code></td>
          <td><code>.col-md-*</code></td>
        </tr>
        <tr>
          <td><code>.offset*</code></td>
          <td><code>.col-md-offset-*</code></td>
        </tr>
        <tr>
          <td><code>.brand</code></td>
          <td><code>.navbar-brand</code></td>
        </tr>
        <tr>
          <td><code>.navbar .nav</code></td>
          <td><code>.navbar-nav</code></td>
        </tr>
        <tr>
          <td><code>.nav-collapse</code></td>
          <td><code>.navbar-collapse</code></td>
        </tr>
        <tr>
          <td><code>.nav-toggle</code></td>
          <td><code>.navbar-toggle</code></td>
        </tr>
        <tr>
          <td><code>.btn-navbar</code></td>
          <td><code>.navbar-btn</code></td>
        </tr>
        <tr>
          <td><code>.hero-unit</code></td>
          <td><code>.jumbotron</code></td>
        </tr>
        <tr>
          <td><code>.icon-*</code></td>
          <td><code>.glyphicon .glyphicon-*</code></td>
        </tr>
        <tr>
          <td><code>.btn</code></td>
          <td><code>.btn .btn-default</code></td>
        </tr>