<commit_before>---
layout: default
title: Getting started
slug: getting-started
lead: "An overview of TODC Bootstrap, how to download and use, basic templates and examples, and more."
base_url: "../"
---


  <!-- Welcome
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="welcome">Welcome!</h1>
    </div>
    <p class="lead">You're looking at the official documentation for Bootstrap (v{{ site.version }}), a front-end framework for building on the Web. Before diving in, get the background story on Bootstrap, useful tidbits about the docs, helpful community links, and more.</p>

    <h2 id="welcome-history">Brief history</h2>
    <p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded. It served as the style guide for internal tools development at the company for over a year before its public release.</p>
    <p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>

    <h2 id="welcome-core-team">Core team</h2>
    <p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
    <div class="list-group bs-team">
      <a class="list-group-item team-member" href="https://github.com/mdo">
        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&amp;type=follow" width="120" height="20"></iframe>
        <img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@mdo">
        <strong><NAME></strong> <small>@mdo</small>
      </a>
      <a class="list-group-item team-member" href="https://github.com/fat">
        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=fat&amp;type=follow" width="120" height="20"></iframe>
        <img src="http://www.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8" alt="@fat">
        <strong><NAME></strong> <small>@fat</small>
      </a>
      <a class="list-group-item team-member" href="https://github.com/cvrebert">
        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=cvrebert&amp;type=follow" width="120" height="20"></iframe>
        <img src="http://www.gravatar.com/avatar/edec428c425453955f770095a7d26c50" alt="@cvrebert">
        <strong><NAME></strong> <small>@cvrebert</small>
      </a>
      <a class="list-group-item team-member" href="https://github.com/juthilo">
        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=juthilo&amp;type=follow" width="120" height="20"></iframe>
        <img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@juthilo">
        <strong><NAME></strong> <small>@juthilo</small>
      </a>
    </div>
    <p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md">contributing guidelines</a> for more information.</p>

    <h2 id="welcome-callouts">Callouts</h2>
    <p>We use callouts throughout the docs to direct attention to important contextual information. These callouts can be informative and optional (blue), warnings (yellow), or dangerously important (red).</p>
    <div class="bs-callout bs-callout-info">
      <h4>Extra information</h4>
      <p>These are helpful notes that provide background information or additional context.</p>
    </div>
    <div class="bs-callout bs-callout-warning">
      <h4>Heads up</h4>
      <p>This is a warning used to highlight pertinent, though not necessarily required, information.</p>
    </div>
    <div class="bs-callout bs-callout-danger">
      <h4>Potential danger ahead</h4>
      <p>Pay attention to these for potentially dangerous or tricky requirements, bugs, and more.</p>
    </div>
    <p>See something worth calling out? Let us know with an <a href="https://github.com/twbs/bootstrap/issues/new">issue on GitHub</a>.</p>

    <h2 id="welcome-community">Community</h2>
    <p>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
    <ul>
      <li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
      <li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
      <li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
      <li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
    </ul>
    <p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
  </div>


  <!-- Getting started
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="download">Download Bootstrap</h1>
    </div>
    <p class="lead">Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>

    <h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
    <p>The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.</p>
    <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" role="button">Download precompiled TODC Bootstrap</a></p>
    <p><a class="btn btn-lg btn-primary" href="{{ site.bs_download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download precompiled Bootstrap</a></p>

    <h3 id="download-additional">Additional downloads</h3>
    <div class="bs-docs-dl-options">
      <h4>
        <a href="{{ site.download_source }}">Download TODC Bootstrap source code</a>
        <br>
        <a href="{{ site.bs_download_source }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrsp source code</a>
      </h4>
      <p>Get the latest TODC Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.</p>
      <h4>
        <a href="{{ site.repo }}">Clone or fork TODC Bootstrap via GitHub</a>
        <br>
        <a href="{{ site.bs_repo }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork Bootstrap via GitHub</a>
      </h4>
      <p>Visit us on GitHub to clone or fork the TODC Bootstrap project.</p>
      <h4>
        Install with <a href="http://bower.io">Bower</a>
      </h4>
      <p>Install and manage Bootstrap's styles, JavaScript, and documentation using <a href="http://bower.io">Bower</a>.</p>
      {% highlight bash %}$ bower install bootstrap{% endhighlight %}
    </div>

    <h3 id="download-cdn">Bootstrap CDN</h3>
    <p>The folks over at <a href="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
{% highlight html %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="{{ site.cdn_css }}">

<!-- Optional theme -->
<link rel="stylesheet" href="{{ site.cdn_theme_css }}">

<!-- Latest compiled and minified JavaScript -->
<script src="{{ site.cdn_js }}"></script>
{% endhighlight %}

    <div class="bs-callout bs-callout-warning" id="callout-less-compilation">
      <h4>Compiling Bootstrap's LESS files</h4>
      <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support <a href="http://twitter.github.io/recess/">Recess</a>, which is Twitter's CSS hinter based on <a href="http://lesscss.org">less.js</a>.</p>
    </div>
  </div>


  <!-- File structure
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="whats-included">What's included</h1>
    </div>
    <p class="lead">Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
    <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) TODC Bootstrap. You'll see something like this:</p>

<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
{% highlight bash %}
todc-bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.min.css
│   ├── todc-bootstrap.css
│   └── todc-bootstrap.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
├── fonts/
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   └── glyphicons-halflings-regular.woff
└── img/
    └── checkmark.png

{% endhighlight %}

    <p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code> and <code>todc-bootstrap.*</code>) , as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code> and <code>todc-bootstrap.min.*</code>). Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
    <div class="bs-callout bs-callout-danger">
      <h4>jQuery required</h4>
      <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
    </div>
  </div>


  <!-- Template
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="template">Basic template</h1>
    </div>
    <p class="lead">Start with this basic HTML template, or modify <a href="../getting-started#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>

    <p>Copy the HTML below to begin working with a minimal TODC Bootstrap document.</p>
{% highlight html %}
<!DOCTYPE html>
<html>
  <head>
    <title>TODC Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- TODC Bootstrap theme -->
    <link href="css/todc-bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
{% endhighlight %}
  </div>


  <!-- Template
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="examples">Examples</h1>
    </div>
    <p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>

    <div class="row bs-examples">
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/starter-template/">
          <img src="../examples/screenshots/starter-template.jpg" alt="">
        </a>
        <h4>Starter template</h4>
        <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/grid/">
          <img src="../examples/screenshots/grid.jpg" alt="">
        </a>
        <h4>Grids</h4>
        <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/jumbotron/">
          <img src="../examples/screenshots/jumbotron.jpg" alt="">
        </a>
        <h4>Jumbotron</h4>
        <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/jumbotron-narrow/">
          <img src="../examples/screenshots/jumbotron-narrow.jpg" alt="">
        </a>
        <h4>Narrow jumbotron</h4>
        <p>Build a more custom page by narrowing the default container and jumbotron.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/navbar/">
          <img src="../examples/screenshots/navbar.jpg" alt="">
        </a>
        <h4>Navbar</h4>
        <p>Super basic template that includes the navbar along with some additional content.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/navbar-static-top/">
          <img src="../examples/screenshots/navbar-static.jpg" alt="">
        </a>
        <h4>Static top navbar</h4>
        <p>Super basic template with a static top navbar along with some additional content.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/navbar-fixed-top/">
          <img src="../examples/screenshots/navbar-fixed.jpg" alt="">
        </a>
        <h4>Fixed navbar</h4>
        <p>Super basic template with a fixed top navbar along with some additional content.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/signin/">
          <img src="../examples/screenshots/sign-in.jpg" alt="">
        </a>
        <h4>Sign-in page</h4>
        <p>Custom form layout and design for a simple sign in form.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/sticky-footer/">
          <img src="../examples/screenshots/sticky-footer.jpg" alt="">
        </a>
        <h4>Sticky footer</h4>
        <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/sticky-footer-navbar/">
          <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="">
        </a>
        <h4>Sticky footer with navbar</h4>
        <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/justified-nav/">
          <img src="../examples/screenshots/justified-nav.jpg" alt="">
        </a>
        <h4>Justified nav</h4>
        <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/offcanvas/">
          <img src="../examples/screenshots/offcanvas.jpg" alt="">
        </a>
        <h4>Offcanvas</h4>
        <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/carousel/">
          <img src="../examples/screenshots/carousel.jpg" alt="">
        </a>
        <h4>Carousel</h4>
        <p>Customize the navbar and carousel, then add some new components.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/non-responsive/">
          <img src="../examples/screenshots/non-responsive.jpg" alt="">
        </a>
        <h4>Non-responsive Bootstrap</h4>
        <p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/theme/">
          <img src="../examples/screenshots/theme.jpg" alt="">
        </a>
        <h4>Bootstrap theme</h4>
        <p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
      </div>
    </div>

  </div>


  <!-- Template
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="disable-responsive">Disabling responsiveness</h1>
    </div>
    <p class="lead">Bootstrap automatically adapts your pages for various screen sizes.
      Here's how to disable this feature so your page works like in <a href="../examples/non-responsive/">this non-responsive example</a>.</p>

    <h3>Steps to disable page responsiveness</h3>
    <ol>
      <li>Omit the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
      <li>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</code> Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
      <li>If using navbars, remove all navbar collapsing and expanding behavior.</li>
      <li>For grid layouts, use <code>.col-xs-*</code> classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.</li>
    </ol>
    <p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed).
      This disables the "mobile site" aspects of Bootstrap.</p>

    <h3>Bootstrap template with responsiveness disabled</h3>
    <p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p>
    <p>
      <a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
    </p>
  </div>


  <!-- Migration
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="migration">Migrating from 2.x to 3.0</h1>
    </div>
    <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="migration-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>.container-fluid</code></td>
            <td><code>.container</code></td>
          </tr>
          <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>.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>
          <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-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><code>.visible-md</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><code>.hidden-md</code></td>
          </tr>
          <tr>
            <td><code>.input-small</code></td>
            <td><code>.input-sm</code></td>
          </tr>
          <tr>
            <td><code>.input-large</code></td>
            <td><code>.input-lg</code></td>
          </tr>
          <tr>
            <td><code>.control-group</code></td>
            <td><code>.form-group</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>
            <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>.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>
          <tr>
            <td><code>.alert-error</code></td>
            <td><code>.alert-danger</code></td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->

    <h2 id="migration-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>
          </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 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>
          </tr>
          <tr>
            <td>Navbar header</td>
            <td><code>.navbar-header</code></td>
          </tr>
          <tr>
            <td>Justified tabs / pills</td>
            <td><code>.nav-justified</code></td>
          </tr>
          <tr>
            <td>Responsive images</td>
            <td><code>.img-responsive</code></td>
          </tr>
          <tr>
            <td>Contextual table rows</td>
            <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
          </tr>
          <tr>
            <td>Contextual panels</td>
            <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
          </tr>
          <tr>
            <td>Modal</td>
            <td><code>.modal-dialog</code> <code>.modal-content</code></td>
          </tr>
          <tr>
            <td>Thumbnail image</td>
            <td><code>.img-thumbnail</code></td>
          </tr>
          <tr>
            <td>Well sizes</td>
            <td><code>.well-sm</code> <code>.well-lg</code></td>
          </tr>
          <tr>
            <td>Alert links</td>
            <td><code>.alert-link</code></td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->


    <h2 id="migration-dropped">What's removed</h2>
    <p>The following elements have been dropped or changed in v3.0.</p>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Element</th>
            <th>Removed from 2.x</th>
            <th>3.0 Equivalent</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Form actions</td>
            <td><code>.form-actions</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Search form</td>
            <td><code>.form-search</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Fluid container</td>
            <td><code>.container-fluid</code></td>
            <td><code>.container</code> (no more fixed grid)</td>
          </tr>
          <tr>
            <td>Fluid row</td>
            <td><code>.row-fluid</code></td>
            <td><code>.row</code> (no more fixed grid)</td>
          </tr>
          <tr>
            <td>Controls wrapper</td>
            <td><code>.controls</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Controls row</td>
            <td><code>.controls-row</code></td>
            <td><code>.row</code> or <code>.form-group</code></td>
          </tr>
          <tr>
            <td>Navbar inner</td>
            <td><code>.navbar-inner</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Navbar vertical dividers</td>
            <td><code>.navbar .divider-vertical</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Dropdown submenu</td>
            <td><code>.dropdown-submenu</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Tab alignments</td>
            <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Nav lists</td>
            <td><code>.nav-list</code> <code>.nav-header</code></td>
            <td>No direct equivalent, but <a href="../components/#list-group">list groups</a> and <a href="../javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->


    <h2 id="migration-notes">Additional notes</h2>
    <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p>
    <ul>
      <li>Text-based form controls are now 100% wide. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
      <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li>
      <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li>
      <li><code>.container</code> and <code>.row</code> are now fluid (percentage-based).</li>
      <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code>&lt;img&gt;</code> size.</li>
      <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li>
      <li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
      <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior.</li>
      <li>The HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal</code> instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
      <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc..</li>
    </ul>
    <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
  </div>


  <!-- Browser support
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="browsers">Browser support</h1>
    </div>
    <p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>

    <h3>Supported browsers</h3>
    <p>Specifically, we support the latest versions of the following:</p>
    <ul>
      <li>Chrome (Mac, Windows, iOS, and Android)</li>
      <li>Safari (Mac and iOS only, as the Windows version is being abandoned)</li>
      <li>Firefox (Mac, Windows)</li>
      <li>Internet Explorer</li>
      <li>Opera (Mac, Windows)</li>
    </ul>
    <p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>

    <h3>Internet Explorer 8 and 9</h3>
    <p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
    <div class="bs-callout bs-callout-warning" id="respond-js-x-domain">
      <h4>Respond.js and cross-domain CSS</h4>
      <p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
    </div>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr><commit_msg>add note to docs about Respond.js & file:// ; fixes part of 11019<commit_after>---
layout: default
title: Getting started
slug: getting-started
lead: "An overview of TODC Bootstrap, how to download and use, basic templates and examples, and more."
base_url: "../"
---


  <!-- Welcome
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="welcome">Welcome!</h1>
    </div>
    <p class="lead">You're looking at the official documentation for Bootstrap (v{{ site.version }}), a front-end framework for building on the Web. Before diving in, get the background story on Bootstrap, useful tidbits about the docs, helpful community links, and more.</p>

    <h2 id="welcome-history">Brief history</h2>
    <p>Bootstrap was created at Twitter in mid-2010 by <a href="https://twitter.com/mdo">@mdo</a> and <a href="https://twitter.com/fat">@fat</a>. Prior to being open-sourced framework, Bootstrap was known as Twitter Blueprint. A few months into development, Twitter held its <a href="https://blog.twitter.com/2010/hack-week">first Hack Week</a> and the project exploded. It served as the style guide for internal tools development at the company for over a year before its public release.</p>
    <p>Originally <a href="https://dev.twitter.com/blog/bootstrap-twitter">released</a> on <a href="https://twitter.com/mdo/statuses/104620039650557952"><time datetime="2011-08-19 11:25">Friday, August 19, 2011</time></a>, we've had over <a href="https://github.com/twbs/bootstrap/releases">twenty releases</a>, including two major rewrites with v2 and v3. With Bootstrap 2, we added responsive functionality to the entire framework as an optional stylesheet. Building on that with Bootstrap 3, we rewrote the library once more to make it responsive by default with a mobile first approach.</p>

    <h2 id="welcome-core-team">Core team</h2>
    <p>Bootstrap is maintained by the founding team and a small group of invaluable core contributors, with the massive support and involvement of our community.</p>
    <div class="list-group bs-team">
      <a class="list-group-item team-member" href="https://github.com/mdo">
        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=mdo&amp;type=follow" width="120" height="20"></iframe>
        <img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@mdo">
        <strong><NAME></strong> <small>@mdo</small>
      </a>
      <a class="list-group-item team-member" href="https://github.com/fat">
        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=fat&amp;type=follow" width="120" height="20"></iframe>
        <img src="http://www.gravatar.com/avatar/a98244cbdacaf1c0b55499466002f7a8" alt="@fat">
        <strong><NAME></strong> <small>@fat</small>
      </a>
      <a class="list-group-item team-member" href="https://github.com/cvrebert">
        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=cvrebert&amp;type=follow" width="120" height="20"></iframe>
        <img src="http://www.gravatar.com/avatar/edec428c425453955f770095a7d26c50" alt="@cvrebert">
        <strong><NAME></strong> <small>@cvrebert</small>
      </a>
      <a class="list-group-item team-member" href="https://github.com/juthilo">
        <iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=juthilo&amp;type=follow" width="120" height="20"></iframe>
        <img src="http://www.gravatar.com/avatar/bc4ab438f7a4ce1c406aadc688427f2c" alt="@juthilo">
        <strong><NAME></strong> <small>@juthilo</small>
      </a>
    </div>
    <p>Get involved with Bootstrap development by <a href="https://github.com/twbs/bootstrap/issues/new">opening an issue</a> or submitting a pull request. Read our <a href="https://github.com/twbs/bootstrap/blob/master/CONTRIBUTING.md">contributing guidelines</a> for more information.</p>

    <h2 id="welcome-callouts">Callouts</h2>
    <p>We use callouts throughout the docs to direct attention to important contextual information. These callouts can be informative and optional (blue), warnings (yellow), or dangerously important (red).</p>
    <div class="bs-callout bs-callout-info">
      <h4>Extra information</h4>
      <p>These are helpful notes that provide background information or additional context.</p>
    </div>
    <div class="bs-callout bs-callout-warning">
      <h4>Heads up</h4>
      <p>This is a warning used to highlight pertinent, though not necessarily required, information.</p>
    </div>
    <div class="bs-callout bs-callout-danger">
      <h4>Potential danger ahead</h4>
      <p>Pay attention to these for potentially dangerous or tricky requirements, bugs, and more.</p>
    </div>
    <p>See something worth calling out? Let us know with an <a href="https://github.com/twbs/bootstrap/issues/new">issue on GitHub</a>.</p>

    <h2 id="welcome-community">Community</h2>
    <p>Stay up to date on the development of Bootstrap and reach out to the community with these helpful resources.</p>
    <ul>
      <li>Read and subscribe to <a href="http://blog.getbootstrap.com/">The Official Bootstrap Blog</a>.</li>
      <li>Have a question that's not a feature request or bug report? <a href="http://groups.google.com/group/twitter-bootstrap">Ask on the mailing list.</a></li>
      <li>Chat with fellow Bootstrappers using IRC in the <code>irc.freenode.net</code> server, in the <a href="irc://irc.freenode.net/#twitter-bootstrap">##twitter-bootstrap channel</a>.</li>
      <li>Find inspiring examples of people building with Bootstrap at the <a href="http://expo.getbootstrap.com">Bootstrap Expo</a>.</li>
    </ul>
    <p>You can also follow <a href="https://twitter.com/twbootstrap">@twbootstrap on Twitter</a> for the latest gossip and awesome music videos.</p>
  </div>


  <!-- Getting started
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="download">Download Bootstrap</h1>
    </div>
    <p class="lead">Bootstrap has a few easy ways to quickly get started, each one appealing to a different skill level and use case. Read through to see what suits your particular needs.</p>

    <h3 id="download-compiled">Compiled CSS, JS, and fonts</h3>
    <p>The fastest way to get Bootstrap is to download the precompiled and minified versions of our CSS, JavaScript, and fonts. No documentation or original source code files are included.</p>
    <p><a class="btn btn-lg btn-primary" href="{{ site.download_dist }}" role="button">Download precompiled TODC Bootstrap</a></p>
    <p><a class="btn btn-lg btn-primary" href="{{ site.bs_download_dist }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);" role="button">Download precompiled Bootstrap</a></p>

    <h3 id="download-additional">Additional downloads</h3>
    <div class="bs-docs-dl-options">
      <h4>
        <a href="{{ site.download_source }}">Download TODC Bootstrap source code</a>
        <br>
        <a href="{{ site.bs_download_source }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download Bootstrsp source code</a>
      </h4>
      <p>Get the latest TODC Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.</p>
      <h4>
        <a href="{{ site.repo }}">Clone or fork TODC Bootstrap via GitHub</a>
        <br>
        <a href="{{ site.bs_repo }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork Bootstrap via GitHub</a>
      </h4>
      <p>Visit us on GitHub to clone or fork the TODC Bootstrap project.</p>
      <h4>
        Install with <a href="http://bower.io">Bower</a>
      </h4>
      <p>Install and manage Bootstrap's styles, JavaScript, and documentation using <a href="http://bower.io">Bower</a>.</p>
      {% highlight bash %}$ bower install bootstrap{% endhighlight %}
    </div>

    <h3 id="download-cdn">Bootstrap CDN</h3>
    <p>The folks over at <a href="http://www.maxcdn.com/">MaxCDN</a> graciously provide CDN support for Bootstrap's CSS and JavaScript. Just use these <a href="http://www.bootstrapcdn.com/">Bootstrap CDN</a> links.</p>
{% highlight html %}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="{{ site.cdn_css }}">

<!-- Optional theme -->
<link rel="stylesheet" href="{{ site.cdn_theme_css }}">

<!-- Latest compiled and minified JavaScript -->
<script src="{{ site.cdn_js }}"></script>
{% endhighlight %}

    <div class="bs-callout bs-callout-warning" id="callout-less-compilation">
      <h4>Compiling Bootstrap's LESS files</h4>
      <p>If you work with Bootstrap's uncompiled source code, you need to compile the LESS files to produce usable CSS files. For compiling LESS files into CSS, we only officially support <a href="http://twitter.github.io/recess/">Recess</a>, which is Twitter's CSS hinter based on <a href="http://lesscss.org">less.js</a>.</p>
    </div>
  </div>


  <!-- File structure
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="whats-included">What's included</h1>
    </div>
    <p class="lead">Within the download you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>
    <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) TODC Bootstrap. You'll see something like this:</p>

<!-- NOTE: This info is intentionally duplicated in the README.
Copy any changes made here over to the README too. -->
{% highlight bash %}
todc-bootstrap/
├── css/
│   ├── bootstrap.css
│   ├── bootstrap.min.css
│   ├── bootstrap-theme.css
│   ├── bootstrap-theme.min.css
│   ├── todc-bootstrap.css
│   └── todc-bootstrap.min.css
├── js/
│   ├── bootstrap.js
│   └── bootstrap.min.js
├── fonts/
│   ├── glyphicons-halflings-regular.eot
│   ├── glyphicons-halflings-regular.svg
│   ├── glyphicons-halflings-regular.ttf
│   └── glyphicons-halflings-regular.woff
└── img/
    └── checkmark.png

{% endhighlight %}

    <p>This is the most basic form of Bootstrap: precompiled files for quick drop-in usage in nearly any web project. We provide compiled CSS and JS (<code>bootstrap.*</code> and <code>todc-bootstrap.*</code>) , as well as compiled and minified CSS and JS (<code>bootstrap.min.*</code> and <code>todc-bootstrap.min.*</code>). Fonts from Glyphicons are included, as is the optional Bootstrap theme.</p>
    <div class="bs-callout bs-callout-danger">
      <h4>jQuery required</h4>
      <p>Please note that <strong>all JavaScript plugins require jQuery</strong> to be included, as shown in the <a href="#template">starter template</a>. <a href="{{ site.repo }}/blob/v{{ site.current_version }}/bower.json">Consult our <code>bower.json</code></a> to see which versions of jQuery are supported.</p>
    </div>
  </div>


  <!-- Template
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="template">Basic template</h1>
    </div>
    <p class="lead">Start with this basic HTML template, or modify <a href="../getting-started#examples">these examples</a>. We hope you'll customize our templates and examples, adapting them to suit your needs.</p>

    <p>Copy the HTML below to begin working with a minimal TODC Bootstrap document.</p>
{% highlight html %}
<!DOCTYPE html>
<html>
  <head>
    <title>TODC Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet" media="screen">
    <!-- TODC Bootstrap theme -->
    <link href="css/todc-bootstrap.min.css" rel="stylesheet" media="screen">

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.6.2/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="js/bootstrap.min.js"></script>
  </body>
</html>
{% endhighlight %}
  </div>


  <!-- Template
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="examples">Examples</h1>
    </div>
    <p class="lead">Build on the basic template above with Bootstrap's many components. See also <a href="#customizing">Customizing Bootstrap</a> for tips on maintaining your own Bootstrap variants.</p>

    <div class="row bs-examples">
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/starter-template/">
          <img src="../examples/screenshots/starter-template.jpg" alt="">
        </a>
        <h4>Starter template</h4>
        <p>Nothing but the basics: compiled CSS and JavaScript along with a container.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/grid/">
          <img src="../examples/screenshots/grid.jpg" alt="">
        </a>
        <h4>Grids</h4>
        <p>Multiple examples of grid layouts with all four tiers, nesting, and more.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/jumbotron/">
          <img src="../examples/screenshots/jumbotron.jpg" alt="">
        </a>
        <h4>Jumbotron</h4>
        <p>Build around the jumbotron with a navbar and some basic grid columns.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/jumbotron-narrow/">
          <img src="../examples/screenshots/jumbotron-narrow.jpg" alt="">
        </a>
        <h4>Narrow jumbotron</h4>
        <p>Build a more custom page by narrowing the default container and jumbotron.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/navbar/">
          <img src="../examples/screenshots/navbar.jpg" alt="">
        </a>
        <h4>Navbar</h4>
        <p>Super basic template that includes the navbar along with some additional content.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/navbar-static-top/">
          <img src="../examples/screenshots/navbar-static.jpg" alt="">
        </a>
        <h4>Static top navbar</h4>
        <p>Super basic template with a static top navbar along with some additional content.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/navbar-fixed-top/">
          <img src="../examples/screenshots/navbar-fixed.jpg" alt="">
        </a>
        <h4>Fixed navbar</h4>
        <p>Super basic template with a fixed top navbar along with some additional content.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/signin/">
          <img src="../examples/screenshots/sign-in.jpg" alt="">
        </a>
        <h4>Sign-in page</h4>
        <p>Custom form layout and design for a simple sign in form.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/sticky-footer/">
          <img src="../examples/screenshots/sticky-footer.jpg" alt="">
        </a>
        <h4>Sticky footer</h4>
        <p>Attach a footer to the bottom of the viewport when the content is shorter than it.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/sticky-footer-navbar/">
          <img src="../examples/screenshots/sticky-footer-navbar.jpg" alt="">
        </a>
        <h4>Sticky footer with navbar</h4>
        <p>Attach a footer to the bottom of the viewport with a fixed navbar at the top.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/justified-nav/">
          <img src="../examples/screenshots/justified-nav.jpg" alt="">
        </a>
        <h4>Justified nav</h4>
        <p>Create a custom navbar with justified links. Heads up! <a href="../components/#nav-justified">Not too WebKit friendly.</a></p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/offcanvas/">
          <img src="../examples/screenshots/offcanvas.jpg" alt="">
        </a>
        <h4>Offcanvas</h4>
        <p>Build a toggleable off-canvas navigation menu for use with Bootstrap.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/carousel/">
          <img src="../examples/screenshots/carousel.jpg" alt="">
        </a>
        <h4>Carousel</h4>
        <p>Customize the navbar and carousel, then add some new components.</p>
      </div>
      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/non-responsive/">
          <img src="../examples/screenshots/non-responsive.jpg" alt="">
        </a>
        <h4>Non-responsive Bootstrap</h4>
        <p>Easily disable the responsiveness of Bootstrap <a href="../getting-started/#disable-responsive">per our docs</a>.</p>
      </div>
      <div class="clearfix visible-xs"></div>

      <div class="col-xs-6 col-md-4">
        <a class="thumbnail" href="../examples/theme/">
          <img src="../examples/screenshots/theme.jpg" alt="">
        </a>
        <h4>Bootstrap theme</h4>
        <p>Load the optional Bootstrap theme for a visually enhanced experience.</p>
      </div>
    </div>

  </div>


  <!-- Template
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="disable-responsive">Disabling responsiveness</h1>
    </div>
    <p class="lead">Bootstrap automatically adapts your pages for various screen sizes.
      Here's how to disable this feature so your page works like in <a href="../examples/non-responsive/">this non-responsive example</a>.</p>

    <h3>Steps to disable page responsiveness</h3>
    <ol>
      <li>Omit the viewport <code>&lt;meta&gt;</code> mentioned in <a href="../css/#overview-mobile">the CSS docs</a></li>
      <li>Override the <code>width</code> on the <code>.container</code> for each grid tier with a single width, for example <code>width: 970px !important;</code> Be sure that this comes after the default Bootstrap CSS. You can optionally avoid the <code>!important</code> with media queries or some selector-fu.</li>
      <li>If using navbars, remove all navbar collapsing and expanding behavior.</li>
      <li>For grid layouts, use <code>.col-xs-*</code> classes in addition to, or in place of, the medium/large ones. Don't worry, the extra-small device grid scales to all resolutions.</li>
    </ol>
    <p>You'll still need Respond.js for IE8 (since our media queries are still there and need to be processed).
      This disables the "mobile site" aspects of Bootstrap.</p>

    <h3>Bootstrap template with responsiveness disabled</h3>
    <p>We've applied these steps to an example. Read its source code to see the specific changes implemented.</p>
    <p>
      <a href="../examples/non-responsive/" class="btn btn-primary">View non-responsive example</a>
    </p>
  </div>


  <!-- Migration
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="migration">Migrating from 2.x to 3.0</h1>
    </div>
    <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="migration-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>.container-fluid</code></td>
            <td><code>.container</code></td>
          </tr>
          <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>.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>
          <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-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><code>.visible-md</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><code>.hidden-md</code></td>
          </tr>
          <tr>
            <td><code>.input-small</code></td>
            <td><code>.input-sm</code></td>
          </tr>
          <tr>
            <td><code>.input-large</code></td>
            <td><code>.input-lg</code></td>
          </tr>
          <tr>
            <td><code>.control-group</code></td>
            <td><code>.form-group</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>
            <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>.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>
          <tr>
            <td><code>.alert-error</code></td>
            <td><code>.alert-danger</code></td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->

    <h2 id="migration-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>
          </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 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>
          </tr>
          <tr>
            <td>Navbar header</td>
            <td><code>.navbar-header</code></td>
          </tr>
          <tr>
            <td>Justified tabs / pills</td>
            <td><code>.nav-justified</code></td>
          </tr>
          <tr>
            <td>Responsive images</td>
            <td><code>.img-responsive</code></td>
          </tr>
          <tr>
            <td>Contextual table rows</td>
            <td><code>.success</code> <code>.danger</code> <code>.warning</code> <code>.active</code></td>
          </tr>
          <tr>
            <td>Contextual panels</td>
            <td><code>.panel-success</code> <code>.panel-danger</code> <code>.panel-warning</code> <code>.panel-info</code></td>
          </tr>
          <tr>
            <td>Modal</td>
            <td><code>.modal-dialog</code> <code>.modal-content</code></td>
          </tr>
          <tr>
            <td>Thumbnail image</td>
            <td><code>.img-thumbnail</code></td>
          </tr>
          <tr>
            <td>Well sizes</td>
            <td><code>.well-sm</code> <code>.well-lg</code></td>
          </tr>
          <tr>
            <td>Alert links</td>
            <td><code>.alert-link</code></td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->


    <h2 id="migration-dropped">What's removed</h2>
    <p>The following elements have been dropped or changed in v3.0.</p>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
            <th>Element</th>
            <th>Removed from 2.x</th>
            <th>3.0 Equivalent</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Form actions</td>
            <td><code>.form-actions</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Search form</td>
            <td><code>.form-search</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Fluid container</td>
            <td><code>.container-fluid</code></td>
            <td><code>.container</code> (no more fixed grid)</td>
          </tr>
          <tr>
            <td>Fluid row</td>
            <td><code>.row-fluid</code></td>
            <td><code>.row</code> (no more fixed grid)</td>
          </tr>
          <tr>
            <td>Controls wrapper</td>
            <td><code>.controls</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Controls row</td>
            <td><code>.controls-row</code></td>
            <td><code>.row</code> or <code>.form-group</code></td>
          </tr>
          <tr>
            <td>Navbar inner</td>
            <td><code>.navbar-inner</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Navbar vertical dividers</td>
            <td><code>.navbar .divider-vertical</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Dropdown submenu</td>
            <td><code>.dropdown-submenu</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Tab alignments</td>
            <td><code>.tabs-left</code> <code>.tabs-right</code> <code>.tabs-below</code></td>
            <td class="text-muted">N/A</td>
          </tr>
          <tr>
            <td>Nav lists</td>
            <td><code>.nav-list</code> <code>.nav-header</code></td>
            <td>No direct equivalent, but <a href="../components/#list-group">list groups</a> and <a href="../javascript/#collapse"><code>.panel-group</code>s</a> are similar.</td>
          </tr>
        </tbody>
      </table>
    </div><!-- /.table-responsive -->


    <h2 id="migration-notes">Additional notes</h2>
    <p>Other changes in v3.0 are not immediately apparent. Base classes, key styles, and behaviors have been adjusted for flexibility and our <em>mobile first</em> approach. Here's a partial list:</p>
    <ul>
      <li>Text-based form controls are now 100% wide. Wrap inputs inside <code>&lt;div class="col-*"&gt;&lt;/div&gt;</code> to control input widths.</li>
      <li><code>.badge</code> no longer has contextual (-success,-primary,etc..) classes.</li>
      <li><code>.btn</code> must also use <code>.btn-default</code> to get the "default" button.</li>
      <li><code>.container</code> and <code>.row</code> are now fluid (percentage-based).</li>
      <li>Images are no longer responsive by default. Use <code>.img-responsive</code> for fluid <code>&lt;img&gt;</code> size.</li>
      <li>The icons, now <code>.glyphicon</code>, are now font based. Icons also require a base and icon class (e.g. <code>.glyphicon .glyphicon-asterisk</code>).</li>
      <li>Typeahead has been dropped, in favor of using <a href="http://twitter.github.io/typeahead.js/">Twitter Typeahead</a>.</li>
      <li>Modal markup has changed significantly. The <code>.modal-header</code>, <code>.modal-body</code>, and <code>.modal-footer</code> sections are now wrapped in <code>.modal-content</code> and <code>.modal-dialog</code> for better mobile styling and behavior.</li>
      <li>The HTML loaded by the <code>remote</code> modal option is now injected into the <code>.modal</code> instead of into the <code>.modal-body</code>. This allows you to also easily vary the header and footer of the modal, not just the modal body.</li>
      <li>JavaScript events are namespaced. For example, to handle the modal "show" event, use <code>'show.bs.modal'</code>. For tabs "shown" use <code>'shown.bs.tab'</code>, etc..</li>
    </ul>
    <p>For more information on upgrading to v3.0, and code snippets from the community, see <a href="http://bootply.com/">Bootply</a>.</p>
  </div>


  <!-- Browser support
  ================================================== -->
  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="browsers">Browser support</h1>
    </div>
    <p class="lead">Bootstrap is built to work best in the latest desktop and mobile browsers, meaning older browsers might display differently styled, though fully functional, renderings of certain components.</p>

    <h3>Supported browsers</h3>
    <p>Specifically, we support the latest versions of the following:</p>
    <ul>
      <li>Chrome (Mac, Windows, iOS, and Android)</li>
      <li>Safari (Mac and iOS only, as the Windows version is being abandoned)</li>
      <li>Firefox (Mac, Windows)</li>
      <li>Internet Explorer</li>
      <li>Opera (Mac, Windows)</li>
    </ul>
    <p>Unofficially, Bootstrap should look and behave well enough in Chromium and Chrome for Linux, Firefox for Linux, and Internet Explorer 7, though they are not officially supported.</p>

    <h3>Internet Explorer 8 and 9</h3>
    <p>Internet Explorer 8 and 9 are also supported, however, please be aware that some CSS3 properties and HTML5 elements are not fully supported by these browsers. In addition, <strong>Internet Explorer 8 requires the use of <a href="https://github.com/scottjehl/Respond">Respond.js</a> to enable media query support.</strong></p>
    <div class="bs-callout bs-callout-warning" id="respond-js-x-domain">
      <h4>Respond.js and cross-domain CSS</h4>
      <p>Using Respond.js with CSS hosted on a different (sub)domain (for example, on a CDN) requires some additional setup. <a href="https://github.com/scottjehl/Respond/blob/master/README.md#cdnx-domain-setup">See the Respond.js docs</a> for details.</p>
    </div>
    <div class="bs-callout bs-callout-warning" id="respond-file-proto">
      <h4>Respond.js and <code>file://</code></h4>
      <p>Due to browser security rules, Respond.js doesn't work with pages viewed via the <code>file://</code> protocol (like when opening a local HTML file). To test responsive features in IE8, view your pages over HTTP(S). <a href="https://github.com/scottjehl/Respond/blob/master/README.md#support--caveats">See the Respond.js docs</a> for details.</p>
    </div>
    <div class="table-responsive">
      <table class="table table-bordered table-striped">
        <thead>
          <tr>
{'fraction_non_alphanumeric': 0.18605823602349061, 'fraction_numerical': 0.0097559646278154, 'mean_word_length': 2.399036680251945, 'pattern_counts': {'":': 0, '<': 3004, '<?xml version=': 0, '>': 3004, 'https://': 39, 'lorem ipsum': 0, 'www.': 12, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 48, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '4185796', 'n_tokens_mistral': 23962, 'n_tokens_neox': 22624, 'n_words': 5588}