2013-04-01 07:11:47 +00:00
---
2013-08-10 23:11:10 +00:00
layout: default
2013-04-01 07:11:47 +00:00
title: Customize and download
2013-05-09 04:56:08 +00:00
slug: customize
2014-01-19 21:27:51 +00:00
lead: Customize Bootstrap's components, Less variables, and jQuery plugins to get your very own version.
2013-04-01 07:11:47 +00:00
---
2014-10-22 11:52:49 +00:00
2014-05-19 06:57:50 +00:00
<!-- 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,
2014-06-11 10:06:32 +00:00
.bs-customizer-import,
2014-05-19 06:57:50 +00:00
.bs-docs-sidebar {
display: none;
}
< / style >
2014-09-08 17:44:28 +00:00
< div class = "alert alert-danger" >
2014-05-19 06:57:50 +00:00
< 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]-->
2013-08-18 00:26:36 +00:00
<!-- Customizer form -->
2014-06-11 10:06:32 +00:00
< div class = "bs-docs-section bs-customizer-import" >
< div id = "import-drop-target" class = "bs-dropzone" >
< h2 > ✍< / h2 >
< 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 > <!-- /import -->
2013-08-12 01:41:31 +00:00
< form class = "bs-customizer" role = "form" >
2013-08-08 06:06:29 +00:00
< div class = "bs-docs-section" id = "less-section" >
2014-01-15 21:24:34 +00:00
< button class = "btn btn-default toggle" type = "button" > Toggle all< / button >
2014-01-19 21:27:51 +00:00
< h1 id = "less" class = "page-header" > Less files< / h1 >
2014-01-15 21:24:34 +00:00
2014-01-19 21:27:51 +00:00
< 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 >
2013-05-23 06:45:12 +00:00
2013-07-26 18:11:09 +00:00
< div class = "row" >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-08-19 06:36:36 +00:00
< h3 > Common CSS< / h3 >
2013-07-26 18:11:09 +00:00
< 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 >
2013-08-19 06:36:36 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "grid.less" >
Grid system
< / label >
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "tables.less" >
Tables
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 07:54:53 +00:00
< input type = "checkbox" checked value = "forms.less" data-dependents = "navbar.less,input-groups.less" >
2013-07-26 18:11:09 +00:00
Forms
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-12-09 01:17:04 +00:00
< input type = "checkbox" checked value = "buttons.less" data-dependents = "button-groups.less" >
2013-07-26 18:11:09 +00:00
Buttons
< / label >
< / div >
2014-05-08 23:48:37 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "responsive-utilities.less" >
Responsive utilities
< / label >
< / div >
2013-08-19 06:36:36 +00:00
< / div > <!-- .col - xs - 6 .col - sm - 4 -->
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-08-19 06:36:36 +00:00
< h3 > Components< / h3 >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "glyphicons.less" >
Glyphicons
2013-07-26 18:11:09 +00:00
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2014-01-25 12:35:46 +00:00
< input type = "checkbox" checked value = "button-groups.less" data-dependencies = "buttons.less" >
2013-08-19 06:36:36 +00:00
Button groups
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2014-01-25 12:35:46 +00:00
< input type = "checkbox" checked value = "input-groups.less" data-dependencies = "forms.less" >
2013-08-19 06:36:36 +00:00
Input groups
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "navs.less" data-dependents = "navbar.less" >
2013-07-26 18:11:09 +00:00
Navs
< / label >
< / div >
< div class = "checkbox" >
< label >
2014-05-08 23:48:37 +00:00
< input type = "checkbox" checked value = "navbar.less" data-dependencies = "forms.less,navs.less" >
2013-07-26 18:11:09 +00:00
Navbar
< / label >
< / div >
2013-08-19 06:36:36 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "breadcrumbs.less" >
Breadcrumbs
< / label >
< / div >
2013-07-26 18:11:09 +00:00
< 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 >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "labels.less" >
Labels
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "badges.less" >
Badges
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "jumbotron.less" >
Jumbotron
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "thumbnails.less" >
Thumbnails
2013-07-26 18:11:09 +00:00
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "alerts.less" >
Alerts
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "progress-bars.less" >
Progress bars
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "media.less" >
Media items
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "list-group.less" >
List groups
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "panels.less" >
Panels
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
2014-03-07 07:19:16 +00:00
< label >
< input type = "checkbox" checked value = "responsive-embed.less" >
Responsive embed
< / label >
< / div >
< div class = "checkbox" >
2013-07-26 18:11:09 +00:00
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "wells.less" >
Wells
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "close.less" >
Close icon
2013-07-26 18:11:09 +00:00
< / label >
< / div >
2013-08-19 06:36:36 +00:00
< / div > <!-- .col - xs - 6 .col - sm - 4 -->
< div class = "col-xs-6 col-sm-4" >
< h3 > JavaScript components< / h3 >
2013-12-15 22:14:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "component-animations.less" >
Component animations (for JS)
< / label >
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "dropdowns.less" >
Dropdowns
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "tooltip.less" >
Tooltips
2013-07-26 18:11:09 +00:00
< / label >
< / div >
2013-08-16 03:25:43 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "popovers.less" >
Popovers
2013-08-16 03:25:43 +00:00
< / label >
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "modals.less" >
Modals
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "carousel.less" >
Carousel
2013-07-26 18:11:09 +00:00
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-08-19 06:36:36 +00:00
< / div > <!-- .col - xs - 6 .col - sm - 4 -->
< / div > <!-- /.row -->
2013-07-26 18:11:09 +00:00
< / div >
2013-05-23 06:34:28 +00:00
2013-08-08 06:06:29 +00:00
< div class = "bs-docs-section" id = "plugin-section" >
2014-01-15 21:24:34 +00:00
< button class = "btn btn-default toggle" type = "button" > Toggle all< / button >
< h1 id = "plugins" class = "page-header" > jQuery plugins< / h1 >
2013-07-27 07:28:23 +00:00
< 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 >
2013-07-26 18:11:09 +00:00
< 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 >
2013-07-26 12:04:15 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "button.js" >
Advanced buttons
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "carousel.js" >
Carousel functionality
< / label >
2013-07-26 12:04:15 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< 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 >
2013-08-18 05:51:00 +00:00
< input type = "checkbox" checked value = "tooltip.js" >
2013-07-26 18:11:09 +00:00
Tooltips
< / label >
< / div >
< div class = "checkbox" >
< label >
2014-01-25 12:35:46 +00:00
< input type = "checkbox" checked value = "popover.js" data-dependencies = "tooltip.js" >
2013-07-26 18:11:09 +00:00
Popovers < small > (requires Tooltips)< / small >
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "tab.js" >
2013-08-19 04:34:17 +00:00
Togglable tabs
2013-07-26 18:11:09 +00:00
< / label >
2013-07-26 12:04:15 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< / 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 >
2013-05-09 04:56:08 +00:00
< / div >
2013-05-23 06:34:28 +00:00
2013-07-26 18:11:09 +00:00
< 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 >
2013-05-23 06:34:28 +00:00
2013-07-26 18:11:09 +00:00
< 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 >
2013-05-24 04:34:32 +00:00
2013-08-08 06:06:29 +00:00
< div class = "bs-docs-section" id = "less-variables-section" >
2014-01-15 21:24:34 +00:00
< button class = "btn btn-default toggle" type = "button" > Reset to defaults< / button >
2014-01-19 21:27:51 +00:00
< h1 id = "less-variables" class = "page-header" > Less variables< / h1 >
2014-01-15 21:24:34 +00:00
2014-01-19 21:27:51 +00:00
< p class = "lead" > Customize Less variables to define colors, sizes and more inside your custom CSS stylesheets.< / p >
2013-10-18 02:52:16 +00:00
{% include customizer-variables.html %}
2013-07-26 18:11:09 +00:00
< / div >
2013-04-01 07:11:47 +00:00
2013-07-27 02:38:12 +00:00
< div class = "bs-docs-section" >
2014-01-15 21:24:34 +00:00
< h1 id = "download" class = "page-header" > Download< / h1 >
2013-07-26 18:11:09 +00:00
< 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" >
2014-04-04 08:28:45 +00:00
< 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 >
2013-07-26 18:11:09 +00:00
< / div >
< / div > <!-- /download -->
2013-09-17 01:58:52 +00:00
< / form >