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>
141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
<td><code>.img-thumbnail</code></td> </tr> <tr> <td><code>ul.unstyled</code></td> <td><code>.list-unstyled</code></td> </tr> <tr> <td><code>ul.inline</code></td> <td><code>.list-inline</code></td> </tr> <tr> <td><code>.muted</code></td> <td><code>.text-muted</code></td> </tr> <tr> <td><code>.label</code></td> <td><code>.label .label-default</code></td> </tr> <tr> <td><code>.label-important</code></td> <td><code>.label-danger</code></td> </tr> <tr> <td><code>.text-error</code></td> <td><code>.text-danger</code></td> </tr> <tr> <td><code>.table .error</code></td> <td><code>.table .danger</code></td> </tr> <tr> <td><code>.bar</code></td> <td><code>.progress-bar</code></td> </tr> <tr> <td><code>.bar-*</code></td> <td><code>.progress-bar-*</code></td> </tr> <tr> <td><code>.accordion</code></td> <td><code>.panel-group</code></td> </tr> <tr> <td><code>.accordion-group</code></td> <td><code>.panel .panel-default</code></td> </tr> <tr> <td><code>.accordion-heading</code></td> <td><code>.panel-heading</code></td> </tr> <tr> <td><code>.accordion-body</code></td> <td><code>.panel-collapse</code></td> </tr> <tr> <td><code>.accordion-inner</code></td> <td><code>.panel-body</code></td> </tr> </tbody> </table> </div><!-- /.table-responsive --> <h2 id="new">What's new</h2> <p>We've added new elements and changed some existing ones. Here are the new or updated styles.</p> <div class="table-responsive"> <table class="table table-bordered table-striped"> <thead> <tr> <th>Element</th> <th>Description</th>
211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280
</tr> </thead> <tbody> <tr> <td>Panels</td> <td><code>.panel .panel-default</code> <code>.panel-body</code> <code>.panel-title</code> <code>.panel-heading</code> <code>.panel-footer</code> <code>.panel-collapse</code></td> </tr> <tr> <td>List groups</td> <td><code>.list-group</code> <code>.list-group-item</code> <code>.list-group-item-text</code> <code>.list-group-item-heading</code></td> </tr> <tr> <td>Glyphicons</td> <td><code>.glyphicon</code></td> </tr> <tr> <td>Jumbotron</td> <td><code>.jumbotron</code></td> </tr> <tr> <td>Extra small grid (&lt;768px)</td> <td><code>.col-xs-*</code></td> </tr> <tr> <td>Small grid (&ge;768px)</td> <td><code>.col-sm-*</code></td> </tr> <tr> <td>Medium grid (&ge;992px)</td> <td><code>.col-md-*</code></td> </tr> <tr> <td>Large grid (&ge;1200px)</td> <td><code>.col-lg-*</code></td> </tr> <tr> <td>Responsive utility classes (&ge;1200px)</td> <td><code>.visible-lg</code> <code>.hidden-lg</code></td> </tr> <tr> <td>Offsets</td> <td><code>.col-sm-offset-*</code> <code>.col-md-offset-*</code> <code>.col-lg-offset-*</code></td> </tr> <tr> <td>Push</td> <td><code>.col-sm-push-*</code> <code>.col-md-push-*</code> <code>.col-lg-push-*</code></td> </tr> <tr> <td>Pull</td> <td><code>.col-sm-pull-*</code> <code>.col-md-pull-*</code> <code>.col-lg-pull-*</code></td> </tr> <tr> <td>Input height sizes</td> <td><code>.input-sm</code> <code>.input-lg</code></td> </tr> <tr> <td>Input groups</td> <td><code>.input-group</code> <code>.input-group-addon</code> <code>.input-group-btn</code></td> </tr> <tr> <td>Form controls</td> <td><code>.form-control</code> <code>.form-group</code></td> </tr> <tr> <td>Button group sizes</td> <td><code>.btn-group-xs</code> <code>.btn-group-sm</code> <code>.btn-group-lg</code></td> </tr> <tr> <td>Navbar text</td> <td><code>.navbar-text</code></td>