Skip to content
GitLab
Switch branch/tag
Find file BlameHistoryPermalink
migration.html 16.39 KiB
1 
---
2 
layout: default
3 
title: Migrating to v3.x
4 
slug: migration
5 
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."
6 
---
7
8
9 
<!-- Migration
10 
================================================== -->
11 
<div class="bs-docs-section">
12 
  <h1 class="page-header">Migrating from 2.x to 3.0</h1>
13
14 
  <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>
15
16 
  <h2 id="classes">Major class changes</h2>
17 
  <p>This table shows the style changes between v2.x and v3.0.</p>
18 
  <div class="table-responsive">
19 
    <table class="table table-bordered table-striped">
20 
      <thead>
21 
        <tr>
22 
          <th>Bootstrap 2.x</th>
23 
          <th>Bootstrap 3.0</th>
24 
        </tr>
25 
      </thead>
26 
      <tbody>
27 
        <tr>
28 
          <td><code>.row-fluid</code></td>
29 
          <td><code>.row</code></td>
30 
        </tr>
31 
        <tr>
32 
          <td><code>.span*</code></td>
33 
          <td><code>.col-md-*</code></td>
34 
        </tr>
35 
        <tr>
36 
          <td><code>.offset*</code></td>
37 
          <td><code>.col-md-offset-*</code></td>
38 
        </tr>
39 
        <tr>
40 
          <td><code>.brand</code></td>
41 
          <td><code>.navbar-brand</code></td>
42 
        </tr>
43 
        <tr>
44 
          <td><code>.navbar .nav</code></td>
45 
          <td><code>.navbar-nav</code></td>
46 
        </tr>
47 
        <tr>
48 
          <td><code>.nav-collapse</code></td>
49 
          <td><code>.navbar-collapse</code></td>
50 
        </tr>
51 
        <tr>
52 
          <td><code>.nav-toggle</code></td>
53 
          <td><code>.navbar-toggle</code></td>
54 
        </tr>
55 
        <tr>
56 
          <td><code>.btn-navbar</code></td>
57 
          <td><code>.navbar-btn</code></td>
58 
        </tr>
59 
        <tr>
60 
          <td><code>.hero-unit</code></td>
61 
          <td><code>.jumbotron</code></td>
62 
        </tr>
63 
        <tr>
64 
          <td><code>.icon-*</code></td>
65 
          <td><code>.glyphicon .glyphicon-*</code></td>
66 
        </tr>
67 
        <tr>
68 
          <td><code>.btn</code></td>
69 
          <td><code>.btn .btn-default</code></td>
70 
        </tr>
7172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140
<tr> <td><code>.btn-mini</code></td> <td><code>.btn-xs</code></td> </tr> <tr> <td><code>.btn-small</code></td> <td><code>.btn-sm</code></td> </tr> <tr> <td><code>.btn-large</code></td> <td><code>.btn-lg</code></td> </tr> <tr> <td><code>.alert</code></td> <td><code>.alert .alert-warning</code></td> </tr> <tr> <td><code>.alert-error</code></td> <td><code>.alert-danger</code></td> </tr> <tr> <td><code>.visible-phone</code></td> <td><code>.visible-xs</code></td> </tr> <tr> <td><code>.visible-tablet</code></td> <td><code>.visible-sm</code></td> </tr> <tr> <td><code>.visible-desktop</code></td> <td>Split into <code>.visible-md .visible-lg</code></td> </tr> <tr> <td><code>.hidden-phone</code></td> <td><code>.hidden-xs</code></td> </tr> <tr> <td><code>.hidden-tablet</code></td> <td><code>.hidden-sm</code></td> </tr> <tr> <td><code>.hidden-desktop</code></td> <td>Split into <code>.hidden-md .hidden-lg</code></td> </tr> <tr> <td><code>.input-block-level</code></td> <td><code>.form-control</code></td> </tr> <tr> <td><code>.control-group</code></td> <td><code>.form-group</code></td> </tr> <tr> <td><code>.control-group.warning .control-group.error .control-group.success</code></td> <td><code>.form-group.has-*</code></td> </tr> <tr> <td><code>.checkbox.inline</code> <code>.radio.inline</code></td> <td><code>.checkbox-inline</code> <code>.radio-inline</code></td> </tr> <tr> <td><code>.input-prepend</code> <code>.input-append</code></td> <td><code>.input-group</code></td> </tr> <tr> <td><code>.add-on</code></td> <td><code>.input-group-addon</code></td> </tr> <tr> <td><code>.img-polaroid</code></td>