components.html

          <div class="progress progress-danger">
            <div class="bar" style="width: 80%"></div>
          </div>
        </div>
<pre class="prettyprint linenums">
&lt;div class="progress progress-info"&gt;
  &lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress progress-success"&gt;
  &lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress progress-warning"&gt;
  &lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress progress-danger"&gt;
  &lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>

        <h3>Striped bars</h3>
        <p>Similar to the solid colors, we have varied striped progress bars.</p>
        <div class="bs-docs-example">
          <div class="progress progress-info progress-striped" style="margin-bottom: 9px;">
            <div class="bar" style="width: 20%"></div>
          </div>
          <div class="progress progress-success progress-striped" style="margin-bottom: 9px;">
            <div class="bar" style="width: 40%"></div>
          </div>
          <div class="progress progress-warning progress-striped" style="margin-bottom: 9px;">
            <div class="bar" style="width: 60%"></div>
          </div>
          <div class="progress progress-danger progress-striped">
            <div class="bar" style="width: 80%"></div>
          </div>
        </div>
<pre class="prettyprint linenums">
&lt;div class="progress progress-info progress-striped"&gt;
  &lt;div class="bar" style="width: 20%"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress progress-success progress-striped"&gt;
  &lt;div class="bar" style="width: 40%"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress progress-warning progress-striped"&gt;
  &lt;div class="bar" style="width: 60%"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="progress progress-danger progress-striped"&gt;
  &lt;div class="bar" style="width: 80%"&gt;&lt;/div&gt;
&lt;/div&gt;
</pre>


        <hr class="bs-docs-separator">


        <h2>Browser support</h2>
        <p>Progress bars use CSS3 gradients, transitions, and animations to achieve all their effects. These features are not supported in IE7-9 or older versions of Firefox.</p>
        <p>Opera and IE do not support animations at this time.</p>

      </section>





      <!-- Miscellaneous
      ================================================== -->
      <section id="misc">
        <div class="page-header">
          <h1>Miscellaneous <small>Lightweight utility components</small></h1>
        </div>

        <h2>Wells</h2>
        <p>Use the well as a simple effect on an element to give it an inset effect.</p>
        <div class="bs-docs-example">
          <div class="well">
            Look, I'm in a well!
          </div>
        </div>
<pre class="prettyprint linenums">
&lt;div class="well"&gt;
  ...
&lt;/div&gt;
</pre>
        <h3>Optional classes</h3>
        <p>Control padding and rounded corners with two optional modifier classes.</p>
        <div class="bs-docs-example">
          <div class="well well-large">
            Look, I'm in a well!
          </div>
        </div>
<pre class="prettyprint linenums">
&lt;div class="well well-large"&gt;
  ...
&lt;/div&gt;
</pre>
        <div class="bs-docs-example">
          <div class="well well-small">
            Look, I'm in a well!
          </div>
        </div>
<pre class="prettyprint linenums">
&lt;div class="well well-small"&gt;
  ...
&lt;/div&gt;
</pre>
        <h2>Close icon</h2>
        <p>Use the generic close icon for dismissing content like modals and alerts.</p>
        <div class="bs-docs-example">
          <p><button class="close" style="float: none;">&times;</button></p>
        </div>
<pre class="prettyprint linenums">&lt;button class="close"&gt;&amp;times;&lt;/button&gt;</pre>
        <p>iOS devices require an href="#" for click events if you rather use an anchor.</p>
<pre class="prettyprint linenums">&lt;a class="close" href="#"&gt;&amp;times;&lt;/a&gt;</pre>

        <h2>Helper classes</h2>
        <p>Simple, focused classes for small display or behavior tweaks.</p>

        <h4>.pull-left</h4>
        <p>Float an element left</p>
<pre class="prettyprint linenums">
class="pull-left"
</pre>
<pre class="prettyprint linenums">
.pull-left {
  float: left;
}
</pre>

        <h4>.pull-right</h4>
        <p>Float an element right</p>
<pre class="prettyprint linenums">
class="pull-right"
</pre>
<pre class="prettyprint linenums">
.pull-right {
  float: right;
}
</pre>

        <h4>.muted</h4>
        <p>Change an element's color to <code>#999</code></p>
<pre class="prettyprint linenums">
class="muted"
</pre>
<pre class="prettyprint linenums">
.muted {
  color: #999;
}
</pre>

        <h4>.clearfix</h4>
        <p>Clear the <code>float</code> on any element</p>
<pre class="prettyprint linenums">
class="clearfix"
</pre>
<pre class="prettyprint linenums">
.clearfix {
  *zoom: 1;
  &:before,
  &:after {
    display: table;
    content: "";
  }
  &:after {
    clear: both;
  }
}
</pre>

      </section>



    </div>
  </div>

</div>



   <!-- Footer
    ================================================== -->
    <footer class="footer">
      <div class="container">
        <p class="pull-right"><a href="#">Back to top</a></p>
        <p>Designed and built with all the love in the world <a href="http://twitter.com/twitter" target="_blank">@twitter</a> by <a href="http://twitter.com/mdo" target="_blank">@mdo</a> and <a href="http://twitter.com/fat" target="_blank">@fat</a>.</p>
        <p>Code licensed under the <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank">Apache License v2.0</a>. Documentation licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <p>Icons from <a href="http://glyphicons.com">Glyphicons Free</a>, licensed under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
        <ul class="footer-links">
          <li><a href="http://blog.getbootstrap.com">Read the blog</a></li>
          <li><a href="https://github.com/twitter/bootstrap/issues?state=open">Submit issues</a></li>
          <li><a href="https://github.com/twitter/bootstrap/wiki">Roadmap and changelog</a></li>
        </ul>
      </div>
    </footer>



    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script src="assets/js/bootstrap-transition.js"></script>
    <script src="assets/js/bootstrap-alert.js"></script>
    <script src="assets/js/bootstrap-modal.js"></script>
    <script src="assets/js/bootstrap-dropdown.js"></script>
    <script src="assets/js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/bootstrap-tab.js"></script>
    <script src="assets/js/bootstrap-tooltip.js"></script>
    <script src="assets/js/bootstrap-popover.js"></script>
    <script src="assets/js/bootstrap-button.js"></script>
    <script src="assets/js/bootstrap-collapse.js"></script>
    <script src="assets/js/bootstrap-carousel.js"></script>
    <script src="assets/js/bootstrap-typeahead.js"></script>
    <script src="assets/js/application.js"></script>


  </body>
</html>