| --- |
| 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. |
| --> |
| <!--[if lt IE 9]> |
| <style> |
| .bs-customizer, |
| .bs-customizer-import, |
| .bs-docs-sidebar { |
| display: none; |
| } |
| </style> |
| <div class="alert alert-danger"> |
| <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 --> |
| |
| <div id="defaults-change-alert" class="alert alert-warning alert-dismissible" role="alert"> |
| <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button> |
| <strong>Heads up!</strong> The default value for <code>@brand-primary</code> has changed in the latest release to improve contrast and accessibility. Please double check your compiled CSS when upgrading. |
| </div> |
| |
| <div class="bs-docs-section bs-customizer-import"> |
| <div id="import-drop-target" class="bs-dropzone"> |
| <div class="import-header"> |
| <span class="glyphicon glyphicon-download-alt" aria-hidden="true"></span> |
| </div> |
| <p class="lead">Have an existing configuration? Upload your <code>config.json</code> to import it.</p> |
| <p>Drag and drop here, or <label id="import-manual-trigger" class="btn-link">manually upload<input type="file" id="import-file-select" class="hidden"></label>.</p> |
| <hr> |
| <p><strong>Don't have one?</strong> That's okay—just start customizing the fields below.</p> |
| </div> |
| </div> |
| |
| <form class="bs-customizer"> |
| <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> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="buttons.less" data-dependents="button-groups.less"> |
| Buttons |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="responsive-utilities.less"> |
| Responsive utilities |
| </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="glyphicons.less"> |
| Glyphicons |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="button-groups.less" data-dependencies="buttons.less"> |
| Button groups |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="input-groups.less" data-dependencies="forms.less"> |
| Input groups |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="navs.less" data-dependents="navbar.less"> |
| Navs |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,navs.less"> |
| Navbar |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="breadcrumbs.less"> |
| Breadcrumbs |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="pagination.less"> |
| Pagination |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="pager.less"> |
| Pager |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="labels.less"> |
| Labels |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="badges.less"> |
| Badges |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="jumbotron.less"> |
| Jumbotron |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="thumbnails.less"> |
| Thumbnails |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="alerts.less"> |
| Alerts |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="progress-bars.less"> |
| Progress bars |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="media.less"> |
| Media items |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="list-group.less"> |
| List groups |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="panels.less"> |
| Panels |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="responsive-embed.less"> |
| Responsive embed |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="wells.less"> |
| Wells |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="close.less"> |
| Close icon |
| </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="component-animations.less"> |
| Component animations (for JS)<br> |
| (includes Collapse) |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="dropdowns.less"> |
| Dropdown |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="tooltip.less"> |
| Tooltip |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="popovers.less"> |
| Popover |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="modals.less"> |
| Modal |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="carousel.less"> |
| Carousel |
| </label> |
| </div> |
| </div><!-- .col-xs-6 .col-sm-4 --> |
| </div><!-- /.row --> |
| </div> |
| |
| <div class="bs-docs-section" id="plugin-section"> |
| <button class="btn btn-default toggle" type="button">Toggle all</button> |
| <h1 id="plugins" class="page-header">jQuery plugins</h1> |
| |
| <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="alert.js"> |
| Alert dismissal |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="button.js"> |
| Advanced buttons |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="carousel.js"> |
| Carousel functionality |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="dropdown.js"> |
| Dropdowns |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="modal.js"> |
| Modals |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="tooltip.js"> |
| Tooltips |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="popover.js" data-dependencies="tooltip.js"> |
| Popovers <small>(requires Tooltips)</small> |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="tab.js"> |
| Togglable tabs |
| </label> |
| </div> |
| </div> |
| <div class="col-lg-6"> |
| <h4>Magic</h4> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="affix.js"> |
| Affix |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="collapse.js"> |
| Collapse |
| </label> |
| </div> |
| <div class="checkbox"> |
| <label> |
| <input type="checkbox" checked value="scrollspy.js"> |
| Scrollspy |
| </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>bootstrap.js</code> and a minified <code>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"> |
| <button class="btn btn-default toggle" type="button">Reset to defaults</button> |
| <h1 id="less-variables" class="page-header">Less variables</h1> |
| |
| <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"> |
| <h1 id="download" class="page-header">Download</h1> |
| |
| <p class="lead">Hooray! Your custom version of 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" disabled class="btn btn-block btn-lg btn-outline" onclick="ga('send', 'event', 'Customize', 'Download', 'Customize and Download');">Compile and Download</button> |
| </div> |
| </div><!-- /download --> |
| </form> |