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."
base_url: "../"
---


  <!-- 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 }}" 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 }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'Download source']);">Download source code</a>
      </h4>
      <p>Get the latest Bootstrap LESS and JavaScript source code by downloading it directly from GitHub.</p>
      <h4>
        <a href="{{ site.repo }}" onclick="_gaq.push(['_trackEvent', 'Getting started', 'Download', 'GitHub project']);">Clone or fork via GitHub</a>
      </h4>
      <p>Visit us on GitHub to clone or fork the 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">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>