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

<!-- less.js isn't IE8-compatible and throws an exception during initialization, so our Blob compatibility check and error messaging code never get called in that case.
  So we use a conditional comment instead to inform folks about the lack of IE8 support.
  The alert covers up the entire customizer UI.
-->
<!--[if lt IE 9]>
  <style>
    .bs-customizer,
    .bs-docs-sidebar {
      display: none;
    }
  </style>
  <div class="alert alert-danger bs-customizer-alert-ie">
    <strong>The Bootstrap Customizer does not support IE9 and below.</strong><br>
    Please take a second to <a href="http://browsehappy.com/">upgrade to a more modern browser</a>.
  </div>
<![endif]-->

<!-- Customizer form -->
<form class="bs-customizer" role="form">
  <div class="bs-docs-section" id="less-section">
    <button class="btn btn-default toggle" type="button">Toggle all</button>
    <h1 id="less" class="page-header">Less files</h1>

    <p class="lead">Choose which Less files to compile into your custom build of 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="print.less">
            Print media styles
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="type.less">
            Typography
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="code.less">
            Code
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="grid.less">
            Grid system
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="tables.less">
            Tables
          </label>
        </div>
        <div class="checkbox">
          <label>
            <input type="checkbox" checked value="forms.less" data-dependents="navbar.less,input-groups.less">
            Forms
          </label>