--- layout: default title: Customize and download slug: customize lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version. Requires IE9+ or latest Safari, Chrome, or Firefox. redirect_from: "/docs/3.3/customize/" --- <!-- 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="https://browsehappy.com/">upgrade to a more modern browser</a>. </div> <![endif]--> <!-- Customizer form --> <div class="bs-docs-section bs-customizer-import"> <div id="import-drop-target" class="bs-dropzone"> <div class="import-header"> <span class="glyphicon glyphicon-folder-open" aria-hidden="true"></span> </div> <p class="lead">Have an existing configuration? Upload your <code>config.json</code> to import it.</p> <p><label id="import-manual-trigger" class="btn btn-outline btn-lg">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="{{ site.baseurl }}/css/">CSS</a> and <a href="{{ site.baseurl }}/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="{{ site.baseurl }}/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="https://jquery.com/" rel="noopener" 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" 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>