<!DOCTYPE html>
<html lang="en">
<head>
<!-- Meta, title, CSS, favicons, etc. -->
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Bootstrap, a sleek, intuitive, and powerful mobile first front-end framework for faster and easier web development.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, framework, bootstrap, front-end, frontend, web development">
<meta name="author" content="Mark Otto, Jacob Thornton, and Bootstrap contributors">
<title>
Bootstrap · The world's most popular mobile-first and responsive front-end framework.
</title>
<!-- Bootstrap core CSS -->
<link href="../dist/css/bootstrap.min.css" rel="stylesheet">
<!-- Documentation extras -->
<link href="../assets/css/docs.min.css" rel="stylesheet">
<!--[if lt IE 9]><script src="../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
<script src="../assets/js/ie-emulation-modes-warning.js"></script>
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<!-- Favicons -->
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="icon" href="/favicon.ico">
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-146052-10', 'getbootstrap.com');
ga('send', 'pageview');
</script>
</head>
<body class="bs-docs-home">
<a id="skippy" class="sr-only sr-only-focusable" href="#content"><div class="container"><span class="skiplink-text">Skip to main content</span></div></a>
<!-- Docs master nav -->
<header class="navbar navbar-static-top bs-docs-nav" id="top" role="banner">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle collapsed" type="button" data-toggle="collapse" data-target=".bs-navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="../" class="navbar-brand">Bootstrap</a>
</div>
<nav class="collapse navbar-collapse bs-navbar-collapse">
<ul class="nav navbar-nav">
<li>
<a href="../getting-started/">Getting started</a>
</li>
<li>
<a href="../css/">CSS</a>
</li>
<li>
<a href="../components/">Components</a>
</li>
<li>
<a href="../javascript/">JavaScript</a>
</li>
<li>
<a href="../customize/">Customize</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://expo.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Expo');">Expo</a></li>
<li><a href="http://blog.getbootstrap.com" onclick="ga('send', 'event', 'Navbar', 'Community links', 'Blog');">Blog</a></li>
</ul>
</nav>
</div>
</header>
<!-- Page content of course! -->
<main class="bs-docs-masthead" id="content" role="main">
<div class="container">
<span class="bs-docs-booticon bs-docs-booticon-lg bs-docs-booticon-outline">B</span>
<p class="lead">Bootstrap is the most popular HTML, CSS, and JS framework for developing responsive, mobile first projects on the web.</p>
<p class="lead">
<a href="getting-started#download" class="btn btn-outline-inverse btn-lg" onclick="ga('send', 'event', 'Jumbotron actions', 'Download', 'Download 3.3.1');">Download Bootstrap</a>
</p>
<p class="version">Currently v3.3.1</p>
<div id="carbonads-container"><div class="carbonad"><div id="azcarbon"></div><script>var z = document.createElement("script"); z.async = true; z.src = "http://engine.carbonads.com/z/32341/azcarbon_2_1_0_HORIZ"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(z, s);</script></div></div>
</div>
</main>
<div class="bs-docs-featurette">
<div class="container">
<h2 class="bs-docs-featurette-title">Designed for everyone, everywhere.</h2>
<p class="lead">Bootstrap makes front-end web development faster and easier. It's made for folks of all skill levels, devices of all shapes, and projects of all sizes.</p>
<hr class="half-rule">
<div class="row">
<div class="col-sm-4">
<img src="assets/img/sass-less.png" alt="Sass and Less support" class="img-responsive">
<h3>Preprocessors</h3>
<p>Bootstrap ships with vanilla CSS, but its source code utilizes the two most popular CSS preprocessors, <a href="../css/#less">Less</a> and <a href="../css/#sass">Sass</a>. Quickly get started with precompiled CSS or build on the source.</p>
</div>
<div class="col-sm-4">
<img src="assets/img/devices.png" alt="Responsive across devices" class="img-responsive">
<h3>One framework, every device.</h3>
<p>Bootstrap easily and efficiently scales your websites and applications with a single code base, from phones to tablets to desktops with CSS media queries.</p>
</div>
<div class="col-sm-4">
<img src="assets/img/components.png" alt="Components" class="img-responsive">
<h3>Full of features</h3>
<p>With Bootstrap, you get extensive and beautiful documentation for common HTML elements, dozens of custom HTML and CSS components, and awesome jQuery plugins.</p>
</div>
</div>
<hr class="half-rule">
<p class="lead">Bootstrap is open source. It's hosted, developed, and maintained on GitHub.</p>
<a href="https://github.com/twbs/bootstrap" class="btn btn-outline btn-lg">View the GitHub project</a>
</div>
</div>
<div class="bs-docs-featurette">
<div class="container">
<h2 class="bs-docs-featurette-title">Built with Bootstrap.</h2>
<p class="lead">Millions of amazing sites across the web are being built with Bootstrap. Get started on your own with our growing <a href="../getting-started/#examples">collection of examples</a> or by exploring some of our favorites.</p>
<hr class="half-rule">
<div class="row bs-docs-featured-sites">
<div class="col-xs-6 col-sm-3">
<a href="http://expo.getbootstrap.com/2014/10/29/lyft/" target="_blank" title="Lyft">
<img src="http://expo.getbootstrap.com/thumbs/lyft-thumb.jpg" alt="Lyft" class="img-responsive">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="http://expo.getbootstrap.com/2014/09/30/vogue/" target="_blank" title="Vogue">
<img src="http://expo.getbootstrap.com/thumbs/vogue-thumb.jpg" alt="Vogue" class="img-responsive">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="http://expo.getbootstrap.com/2014/03/13/riot-design/" target="_blank" title="Riot Design">
<img src="http://expo.getbootstrap.com/thumbs/riot-thumb.jpg" alt="Riot Design" class="img-responsive">
</a>
</div>
<div class="col-xs-6 col-sm-3">
<a href="http://expo.getbootstrap.com/2014/02/12/newsweek/" target="_blank" title="Newsweek">
<img src="http://expo.getbootstrap.com/thumbs/newsweek-thumb.jpg" alt="Newsweek" class="img-responsive">
</a>
</div>
</div>
<hr class="half-rule">
<p class="lead">We showcase dozens of inspiring projects built with Bootstrap on the Bootstrap Expo.</p>
<a href="http://expo.getbootstrap.com" class="btn btn-outline btn-lg">Explore the Expo</a>
</div>
</div>
<!-- Footer
================================================== -->
<footer class="bs-docs-footer" role="contentinfo">
<div class="container">
<div class="bs-docs-social">
<ul class="bs-docs-social-buttons">
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=watch&count=true" width="100" height="20" title="Star on GitHub"></iframe>
</li>
<li>
<iframe class="github-btn" src="http://ghbtns.com/github-btn.html?user=twbs&repo=bootstrap&type=fork&count=true" width="102" height="20" title="Fork on GitHub"></iframe>
</li>
<li class="follow-btn">
<a href="https://twitter.com/twbootstrap" class="twitter-follow-button" data-link-color="#0069D6" data-show-count="true">Follow @twbootstrap</a>
</li>
<li class="tweet-btn">
<a href="https://twitter.com/share" class="twitter-share-button" data-url="http://getbootstrap.com/" data-count="horizontal" data-via="twbootstrap" data-related="mdo:Creator of Bootstrap">Tweet</a>
</li>
</ul>
</div>
<p>Designed and built with all the love in the world by <a href="https://twitter.com/mdo" target="_blank">@mdo</a> and <a href="https://twitter.com/fat" target="_blank">@fat</a>.</p>
<p>Maintained by the <a href="https://github.com/orgs/twbs/people">core team</a> with the help of <a href="https://github.com/twbs/bootstrap/graphs/contributors">our contributors</a>.</p>
<p>Code licensed under <a href="https://github.com/twbs/bootstrap/blob/master/LICENSE" target="_blank">MIT</a>, documentation under <a href="http://creativecommons.org/licenses/by/3.0/">CC BY 3.0</a>.</p>
<ul class="bs-docs-footer-links text-muted">
<li>Currently v3.3.1</li>
<li>·</li>
<li><a href="https://github.com/twbs/bootstrap">GitHub</a></li>
<li>·</li>
<li><a href="../getting-started/#examples">Examples</a></li>
<li>·</li>
<li><a href="../2.3.2/">v2.3.2 docs</a></li>
<li>·</li>
<li><a href="../about/">About</a></li>
<li>·</li>
<li><a href="http://expo.getbootstrap.com">Expo</a></li>
<li>·</li>
<li><a href="http://blog.getbootstrap.com">Blog</a></li>
<li>·</li>
<li><a href="https://github.com/twbs/bootstrap/issues">Issues</a></li>
<li>·</li>
<li><a href="https://github.com/twbs/bootstrap/releases">Releases</a></li>
</ul>
</div>
</footer>
<!-- Bootstrap core JavaScript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="../dist/js/bootstrap.min.js"></script>
<script src="../assets/js/docs.min.js"></script>
<!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
<script src="../assets/js/ie10-viewport-bug-workaround.js"></script>
<script>
window.twttr = (function (d,s,id) {
var t, js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return; js=d.createElement(s); js.id=id; js.async=1;
js.src="https://platform.twitter.com/widgets.js"; fjs.parentNode.insertBefore(js, fjs);
return window.twttr || (t = { _e: [], ready: function(f){ t._e.push(f) } });
}(document, "script", "twitter-wjs"));
</script>
<!-- Analytics
================================================== -->
<script>
var _gauges = _gauges || [];
(function() {
var t = document.createElement('script');
t.async = true;
t.id = 'gauges-tracker';
t.setAttribute('data-site-id', '4f0dc9fef5a1f55508000013');
t.src = '//secure.gaug.es/track.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(t, s);
})();
</script>
</body>
</html>