bootstrap/docs/customize.html

---
layout: default
title: Customize and download
slug: customize
lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
base_url: "../"
---

<!-- Customizer form -->
<form class="bs-customizer" role="form">
  <div class="bs-docs-section" id="less-section">
    <div class="page-header">
      <button class="btn btn-default toggle" type="button">Toggle all</button>
      <h1 id="less">Less files</h1>
    </div>
    
    <p class="lead">Choose which Less files to compile into your custom build of Jasny Bootstrap. Not sure which files to use? Read through the <a href="../css/">CSS</a> and <a href="../components/">Components</a> pages in the docs.</p>

    <div class="row">
      <div class="col-xs-6 col-sm-4">
        <h3>Common CSS</h3>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="grid-container-smooth.less">
            Grid system
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="button-labels.less">
            Button labels
          </label>
        </div>
      </div><!-- .col-xs-6 .col-sm-4 -->

      <div class="col-xs-6 col-sm-4">
        <h3>Components</h3>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="navmenu.less">
            Navmenu
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="alerts-fixed.less">
            Alerts
          </label>
        </div>
      </div><!-- .col-xs-6 .col-sm-4 -->

      <div class="col-xs-6 col-sm-4">
        <h3>JavaScript components</h3>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="offcanvas.less">
            Off canvas
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="rowlink.less">
            Rowlink
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="inputmask.less">
            Input mask
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="fileinput.less">
            File input
          </label>
        </div>
      </div><!-- .col-xs-6 .col-sm-4 -->
    </div><!-- /.row -->
    
    <div class="bs-callout bs-callout-danger">
      <h4>Vanilla Bootstrap required</h4>
      <p>Jasny Bootstrap requires <a href="http://getbootstrap.com/" target="_blank">vanilla Bootstrap</a> to be included.</p>
    </div>
  </div>



  <div class="bs-docs-section" id="plugin-section">
    <div class="page-header">
      <button class="btn btn-default toggle" type="button">Toggle all</button>
      <h1 id="plugins">jQuery plugins</h1>
    </div>
    
    <p class="lead">Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the <a href="../javascript/">JavaScript</a> page in the docs.</p>
    <div class="row">
      <div class="col-lg-6">
        <h4>Linked to components</h4>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="rowlink.js">
            Rowlink
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="inputmask.js">
            Input mask
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="fileinput.js">
            File input
          </label>
        </div>
      </div>
      <div class="col-lg-6">
        <h4>Magic</h4>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="offcanvas.js">
            Off canvas
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="transition.js">
            Transitions <small>(required for any kind of animation)</small>
          </label>
        </div>
      </div>
    </div>

    <div class="bs-callout bs-callout-info">
      <h4>Produces two files</h4>
      <p>All checked plugins will be compiled into a readable <code>jasny-bootstrap.js</code> and a minified <code>jasny-bootstrap.min.js</code>. We recommend you use the minified version in production.</p>
    </div>

    <div class="bs-callout bs-callout-danger">
      <h4>jQuery required</h4>
      <p>All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
    </div>
  </div>



  <div class="bs-docs-section" id="less-variables-section">
    <div class="page-header">
      <button class="btn btn-default toggle" type="reset">Reset to defaults</button>
      <h1 id="less-variables">Less variables</h1>
    </div>

    <p class="lead">Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
    {% include customizer-variables.html %}
  </div>



  <div class="bs-docs-section">
    <div class="page-header">
      <h1 id="download">Download</h1>
    </div>
    
    <p class="lead">Hooray! Your custom version of Jasny Bootstrap is now ready to be compiled. Just click the button below to finish the process.</p>
    <div class="bs-customize-download">
      <button type="submit" id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>
    </div>
  </div><!-- /download -->
</form>