getting-started.html

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


<!-- Getting started
================================================== -->
<div class="bs-docs-section">
  <h1 id="download" class="page-header">Download</h1>

  <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>

  <div class="row bs-downloads">
    <div class="col-sm-4">
      <h3 id="download-bootstrap">Bootstrap</h3>
      <p>Compiled and minified CSS, JavaScript, and fonts. No docs or original source files are included.</p>
      <a href="{{ site.download.dist }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download compiled']);">Download Bootstrap</a>
    </div>
    <div class="col-sm-4">
      <h3 id="download-source">Source code</h3>
      <p>Source Less, JavaScript, and font files, along with our docs. <strong>Requires a Less compiler and <a href="{{ site.repo }}#compiling-css-and-javascript">some setup.</a></strong></p>
      <a href="{{ site.download.source }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source</a>
    </div>
    <div class="col-sm-4">
      <h3 id="download-sass">Sass</h3>
      <p><a href="{{ site.sass_repo }}">Bootstrap ported from Less to Sass</a> for easy inclusion in Rails, Compass, or Sass-only projects.</p>
      <a href="{{ site.download.sass }}" class="btn btn-lg btn-outline" role="button" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download Sass']);">Download Sass</a>
    </div>
  </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.css_theme }}">

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

  <h3 id="download-bower">Install with Bower</h3>
  <p>Install and manage Bootstrap's Less, CSS, JavaScript, and fonts using <a href="http://bower.io">Bower</a>.</p>
  {% highlight bash %}$ bower install bootstrap{% endhighlight %}
</div>



<!-- File structure
================================================== -->
<div class="bs-docs-section">
  <h1 id="whats-included" class="page-header">What's included</h1>

  <p class="lead">Bootstrap is downloadable in two forms, within which you'll find the following directories and files, logically grouping common resources and providing both compiled and minified variations.</p>

  <div class="bs-callout bs-callout-warning" id="jquery-required">
    <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>

  <h2 id="whats-included-precompiled">Precompiled Bootstrap</h2>
  <p>Once downloaded, unzip the compressed folder to see the structure of (the compiled) 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 %}