base-css.html

      <p><strong>Note:</strong> All buttons must include the <code>.btn</code> class. Button styles should be applied to <code>&lt;button&gt;</code> and <code>&lt;a&gt;</code> elements for consistency.</p>
    </div>
  </div>

  <div class="row">
    <div class="span4">
      <h3>Multiple sizes</h3>
      <p>Fancy larger or smaller buttons? Have at it!</p>
      <p>
        <a href="#" class="btn large primary">Primary action</a>
        <a href="#" class="btn large">Action</a>
      </p>
      <p>
        <a href="#" class="btn small primary">Primary action</a>
        <a href="#" class="btn small">Action</a>
      </p>
    </div>
    <div class="span8">
      <h3>Disabled state</h3>
      <p>For buttons that are not active or are disabled by the app for one reason or another, use the disabled state. That’s <code>.disabled</code> for links and <code>:disabled</code> for <code>&lt;button&gt;</code> elements.</p>
      <p>
        <a href="#" class="btn large primary disabled">Primary action</a>
        <a href="#" class="btn large disabled">Action</a>
      </p>
      <p>
        <button class="btn large primary disabled" disabled="disabled">Primary action</button>&nbsp;<button class="btn large" disabled>Action</button>
      </p>
    </div>
  </div>

  <h2>Button groups</h2>
  <div class="well">
    <div class="btn-group">
      <a class="btn" href="#">Left</a>
      <a class="btn" href="#">Middle</a>
      <a class="btn" href="#">Right</a>
    </div>
  </div>
  <div class="well">
    <div class="btn-toolbar">
      <div class="btn-group">
        <a class="btn" href="#">1</a>
        <a class="btn" href="#">2</a>
        <a class="btn" href="#">3</a>
        <a class="btn" href="#">4</a>
        <a class="btn" href="#">5</a>
      </div>
      <div class="btn-group">
        <a class="btn" href="#">6</a>
        <a class="btn" href="#">7</a>
        <a class="btn" href="#">8</a>
      </div>
      <div class="btn-group">
        <a class="btn" href="#">9</a>
      </div>
      <div class="btn-group">
        <a class="btn" href="#">10</a>
      </div>
    </div>
  </div>

</section>


      <!-- Footer
      ================================================== -->
      <footer class="footer">
        <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>.<br>
          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>
      </footer>
    </div><!-- /container -->

    <!-- Le javascript -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="http://code.jquery.com/jquery-1.5.2.min.js"></script>
    <script src="http://autobahn.tablesorter.com/jquery.tablesorter.min.js"></script>
    <script src="assets/js/google-code-prettify/prettify.js"></script>
    <script>$(function () { prettyPrint() })</script>
    <script src="../js/bootstrap-transitions.js"></script>
    <script src="../js/bootstrap-dropdown.js"></script>
    <script src="../js/bootstrap-twipsy.js"></script>
    <script src="../js/bootstrap-scrollspy.js"></script>
    <script src="assets/js/application.js"></script>
  </body>
</html>