3 title: Customize and download
5 lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
9 <!-- Customizer form -->
10 <form class="bs-customizer" role="form">
11 <div class="bs-docs-section" id="less-section">
12 <div class="page-header">
13 <button class="btn btn-default toggle" type="button">Toggle all</button>
14 <h1 id="less">LESS files</h1>
16 <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>
19 <div class="col-xs-6 col-sm-4">
21 <div class="checkbox">
23 <input type="checkbox" checked value="print.less">
27 <div class="checkbox">
29 <input type="checkbox" checked value="type.less">
33 <div class="checkbox">
35 <input type="checkbox" checked value="code.less">
39 <div class="checkbox">
41 <input type="checkbox" checked value="grid.less">
45 <div class="checkbox">
47 <input type="checkbox" checked value="tables.less">
51 <div class="checkbox">
53 <input type="checkbox" checked value="forms.less" data-dependents="navbar.less,input-groups.less">
57 <div class="checkbox">
59 <input type="checkbox" checked value="buttons.less">
63 </div><!-- .col-xs-6 .col-sm-4 -->
65 <div class="col-xs-6 col-sm-4">
67 <div class="checkbox">
69 <input type="checkbox" checked value="glyphicons.less">
73 <div class="checkbox">
75 <input type="checkbox" checked value="button-groups.less" data-dependency="buttons.less">
79 <div class="checkbox">
81 <input type="checkbox" checked value="input-groups.less" data-dependency="forms.less">
85 <div class="checkbox">
87 <input type="checkbox" checked value="navs.less" data-dependents="navbar.less">
91 <div class="checkbox">
93 <input type="checkbox" checked value="navbar.less" data-dependencies="forms.less,utilities.less,navs.less">
97 <div class="checkbox">
99 <input type="checkbox" checked value="breadcrumbs.less">
103 <div class="checkbox">
105 <input type="checkbox" checked value="pagination.less">
109 <div class="checkbox">
111 <input type="checkbox" checked value="pager.less">
115 <div class="checkbox">
117 <input type="checkbox" checked value="labels.less">
121 <div class="checkbox">
123 <input type="checkbox" checked value="badges.less">
127 <div class="checkbox">
129 <input type="checkbox" checked value="jumbotron.less">
133 <div class="checkbox">
135 <input type="checkbox" checked value="thumbnails.less">
139 <div class="checkbox">
141 <input type="checkbox" checked value="alerts.less">
145 <div class="checkbox">
147 <input type="checkbox" checked value="progress-bars.less">
151 <div class="checkbox">
153 <input type="checkbox" checked value="media.less">
157 <div class="checkbox">
159 <input type="checkbox" checked value="list-group.less">
163 <div class="checkbox">
165 <input type="checkbox" checked value="panels.less">
169 <div class="checkbox">
171 <input type="checkbox" checked value="wells.less">
175 <div class="checkbox">
177 <input type="checkbox" checked value="close.less">
181 </div><!-- .col-xs-6 .col-sm-4 -->
183 <div class="col-xs-6 col-sm-4">
184 <h3>JavaScript components</h3>
185 <div class="checkbox">
187 <input type="checkbox" checked value="dropdowns.less">
191 <div class="checkbox">
193 <input type="checkbox" checked value="tooltip.less">
197 <div class="checkbox">
199 <input type="checkbox" checked value="popovers.less">
203 <div class="checkbox">
205 <input type="checkbox" checked value="modals.less">
209 <div class="checkbox">
211 <input type="checkbox" checked value="carousel.less">
217 <div class="checkbox">
219 <input type="checkbox" checked value="utilities.less" data-dependents="navbar.less">
223 <div class="checkbox">
225 <input type="checkbox" checked value="responsive-utilities.less">
229 <div class="checkbox">
231 <input type="checkbox" checked value="component-animations.less">
232 Component animations (for JS)
235 </div><!-- .col-xs-6 .col-sm-4 -->
241 <div class="bs-docs-section" id="plugin-section">
242 <div class="page-header">
243 <button class="btn btn-default toggle" type="button">Toggle all</button>
244 <h1 id="plugins">jQuery plugins</h1>
246 <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>
248 <div class="col-lg-6">
249 <h4>Linked to components</h4>
250 <div class="checkbox">
252 <input type="checkbox" checked value="alert.js">
256 <div class="checkbox">
258 <input type="checkbox" checked value="button.js">
262 <div class="checkbox">
264 <input type="checkbox" checked value="carousel.js">
265 Carousel functionality
268 <div class="checkbox">
270 <input type="checkbox" checked value="dropdown.js">
274 <div class="checkbox">
276 <input type="checkbox" checked value="modal.js">
280 <div class="checkbox">
282 <input type="checkbox" checked value="tooltip.js">
286 <div class="checkbox">
288 <input type="checkbox" checked value="popover.js" data-dependency="tooltip.js">
289 Popovers <small>(requires Tooltips)</small>
292 <div class="checkbox">
294 <input type="checkbox" checked value="tab.js">
299 <div class="col-lg-6">
301 <div class="checkbox">
303 <input type="checkbox" checked value="affix.js">
307 <div class="checkbox">
309 <input type="checkbox" checked value="collapse.js">
313 <div class="checkbox">
315 <input type="checkbox" checked value="scrollspy.js">
319 <div class="checkbox">
321 <input type="checkbox" checked value="transition.js">
322 Transitions <small>(required for any kind of animation)</small>
328 <div class="bs-callout bs-callout-info">
329 <h4>Produces two files</h4>
330 <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>
333 <div class="bs-callout bs-callout-danger">
334 <h4>jQuery required</h4>
335 <p>All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
341 <div class="bs-docs-section" id="less-variables-section">
342 <div class="page-header">
343 <button class="btn btn-default toggle" type="button">Reset to defaults</button>
344 <h1 id="less-variables">LESS variables</h1>
346 <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
348 <h2 id="variables-basics">Basics</h2>
350 <h3>Body background</h3>
352 <div class="col-lg-6">
353 <label>@body-bg</label>
354 <input type="text" class="form-control" placeholder="#fff" data-var="@body-bg">
355 <p class="help-block">Background color applied to <code><body></code>.</p>
361 <div class="col-lg-6">
362 <label>@font-family-sans-serif</label>
363 <input type="text" class="form-control" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif" data-var="@font-family-sans-serif">
364 <p class="help-block">Default sans-serif fonts.</p>
365 <label>@font-family-serif</label>
366 <input type="text" class="form-control" placeholder="Georgia, 'Times New Roman', Times, serif" data-var="@font-family-serif">
367 <p class="help-block">Default serif fonts.</p>
368 <label>@font-family-monospace</label>
369 <input type="text" class="form-control" placeholder="Monaco, Menlo, Consolas, 'Courier New', monospace" data-var="@font-family-monospace">
370 <p class="help-block">Default monospace fonts for <code><code></code> and <code><pre></code>.</p>
372 <div class="col-lg-6">
373 <label>@font-family-base</label>
374 <input type="text" class="form-control" placeholder="@font-family-sans-serif" data-var="@font-family-base">
375 <p class="help-block">Used to globally set font-family in Bootstrap.</p>
376 <label>@font-size-base</label>
377 <input type="text" class="form-control" placeholder="14px" data-var="@font-size-base">
378 <p class="help-block">Used to calculate font-size throughout Bootstrap.</p>
379 <label>@line-height-base</label>
380 <input type="text" class="form-control" placeholder="1.428571429" data-var="@line-height-base">
381 <p class="help-block">Used to calculate line-height throughout Bootstrap.</p>
387 <div class="col-lg-6">
388 <label>@code-color</label>
389 <input type="text" class="form-control" placeholder="#c7254e" data-var="@code-color">
390 <label>@code-bg</label>
391 <input type="text" class="form-control" placeholder="#f9f2f4" data-var="@code-bg">
393 <div class="col-lg-6">
394 <label>@pre-color</label>
395 <input type="text" class="form-control" placeholder="@gray-dark" data-var="@pre-color">
396 <label>@pre-bg</label>
397 <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@pre-bg">
398 <label>@pre-border-color</label>
399 <input type="text" class="form-control" placeholder="#ccc" data-var="@pre-border-color">
405 <div class="col-lg-6">
406 <label>@headings-font-family</label>
407 <input type="text" class="form-control" placeholder="@font-family-base" data-var="@headings-font-family">
408 <p class="help-block">Choose a separate font-family for headings.</p>
409 <label>@headings-font-weight</label>
410 <input type="text" class="form-control" placeholder="500" data-var="@headings-font-weight">
411 <p class="help-block">Choose a separate font-weight for headings.</p>
413 <div class="col-lg-6">
414 <label>@headings-line-height</label>
415 <input type="text" class="form-control" placeholder="1.1" data-var="@headings-line-height">
416 <p class="help-block">Choose a separate line-height for headings.</p>
422 <div class="col-lg-6">
423 <p>Define custom colors used in several contexts.</p>
424 <label>@brand-primary</label>
425 <input type="text" class="form-control" placeholder="#428bca" data-var="@brand-primary">
426 <p class="help-block">Used for primary buttons, panels and more.</p>
427 <label>@brand-success</label>
428 <input type="text" class="form-control" placeholder="#5cb85c" data-var="@brand-success">
429 <p class="help-block">Used to indicate success.</p>
430 <label>@brand-warning</label>
431 <input type="text" class="form-control" placeholder="#f0ad4e" data-var="@brand-warning">
432 <p class="help-block">Used to indicate a warning.</p>
433 <label>@brand-danger</label>
434 <input type="text" class="form-control" placeholder="#d9534f" data-var="@brand-danger">
435 <p class="help-block">Used to indicate danger.</p>
436 <label>@brand-info</label>
437 <input type="text" class="form-control" placeholder="#5bc0de" data-var="@brand-info">
438 <p class="help-block">Used to indicate informational content.</p>
440 <div class="col-lg-6">
441 <p>Define your preferred colors for standard text and links.</p>
442 <label>@text-color</label>
443 <input type="text" class="form-control" placeholder="@gray-dark" data-var="@text-color">
444 <p class="help-block">Global color set on the body.</p>
445 <label>@link-color</label>
446 <input type="text" class="form-control" placeholder="@brand-primary" data-var="@link-color">
447 <p class="help-block">Global link color for text.</p>
448 <label>@link-color-hover</label>
449 <input type="text" class="form-control" placeholder="darken(@link-color, 15%)" data-var="@link-color-hover">
450 <p class="help-block">Automatically darken links on hover via color function.</p>
454 <h3>Media queries breakpoints</h3>
455 <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
457 <div class="col-xs-6">
458 <label>@screen-xs</label>
459 <input type="text" class="form-control" placeholder="480px" data-var="@screen-xs">
460 <label>@screen-sm</label>
461 <input type="text" class="form-control" placeholder="768px" data-var="@screen-sm">
463 <div class="col-xs-6">
464 <label>@screen-md</label>
465 <input type="text" class="form-control" placeholder="992px" data-var="@screen-md">
466 <label>@screen-lg</label>
467 <input type="text" class="form-control" placeholder="1200px" data-var="@screen-lg">
471 <h3>Container sizes</h3>
472 <p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
474 <div class="col-xs-6 col-sm-4">
475 <label>@container-tablet</label>
476 <input type="text" class="form-control" placeholder="728px" data-var="@container-tablet">
477 <p class="help-block">For <code>@screen-sm</code> and up.</p>
479 <div class="col-xs-6 col-sm-4">
480 <label>@container-desktop</label>
481 <input type="text" class="form-control" placeholder="940px" data-var="@container-desktop">
482 <p class="help-block">For <code>@screen-md</code> and up.</p>
484 <div class="clearfix visible-xs"></div>
485 <div class="col-xs-6 col-sm-4">
486 <label>@container-lg-desktop</label>
487 <input type="text" class="form-control" placeholder="1170px" data-var="@container-lg-desktop">
488 <p class="help-block">For <code>@screen-lg</code> and up.</p>
493 <p>Define your custom responsive grid.</p>
496 Temporarily removed until mixins are restored in v3.1
497 <div class="col-xs-6 col-sm-4">
498 <label>@grid-columns</label>
499 <input type="text" class="form-control" placeholder="12" data-var="@grid-columns">
500 <p class="help-block">Number of columns in the grid.</p>
503 <div class="col-xs-6 col-sm-4">
504 <label>@grid-gutter-width</label>
505 <input type="text" class="form-control" placeholder="30px" data-var="@grid-gutter-width">
506 <p class="help-block">Padding between columns.</p>
508 <div class="clearfix visible-xs"></div>
509 <div class="col-xs-6 col-sm-4">
510 <label>@grid-float-breakpoint</label>
511 <input type="text" class="form-control" placeholder="@screen-sm" data-var="@grid-float-breakpoint">
512 <p class="help-block">Point at which the navbar stops collapsing.</p>
517 <p>Define common padding and border radius sizes and more.</p>
519 <div class="col-lg-6">
521 <label>@padding-base-vertical</label>
522 <input type="text" class="form-control" placeholder="8px" data-var="@padding-base-vertical">
523 <label>@padding-base-horizontal</label>
524 <input type="text" class="form-control" placeholder="12px" data-var="@padding-base-horizontal">
525 <label>@padding-large-vertical</label>
526 <input type="text" class="form-control" placeholder="14px" data-var="@padding-large-vertical">
527 <label>@padding-large-horizontal</label>
528 <input type="text" class="form-control" placeholder="16px" data-var="@padding-large-horizontal">
529 <label>@padding-small-vertical</label>
530 <input type="text" class="form-control" placeholder="5px" data-var="@padding-small-vertical">
531 <label>@padding-small-horizontal</label>
532 <input type="text" class="form-control" placeholder="10px" data-var="@padding-small-horizontal">
534 <div class="col-lg-6">
535 <h4>Border radius sizes</h4>
536 <label>@border-radius-base</label>
537 <input type="text" class="form-control" placeholder="4px" data-var="@border-radius-base">
538 <label>@border-radius-large</label>
539 <input type="text" class="form-control" placeholder="6px" data-var="@border-radius-large">
540 <label>@border-radius-small</label>
541 <input type="text" class="form-control" placeholder="3px" data-var="@border-radius-small">
542 <h4>Active background color</h4>
543 <label>@component-active-bg</label>
544 <input type="text" class="form-control" placeholder="@brand-primary" data-var="@component-active-bg">
545 <p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p>
549 <h2 id="variables-buttons">Buttons</h2>
550 <p>For each of Bootstrap's buttons, define text, background and border color.</p>
552 <div class="col-lg-6">
554 <label>@btn-default-color</label>
555 <input type="text" class="form-control" placeholder="#fff" data-var="@btn-default-color">
556 <label>@btn-default-bg</label>
557 <input type="text" class="form-control" placeholder="#474949" data-var="@btn-default-bg">
558 <label>@btn-default-border</label>
559 <input type="text" class="form-control" placeholder="@btn-default-bg" data-var="@btn-default-border">
561 <label>@btn-primary-color</label>
562 <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-primary-color">
563 <label>@btn-primary-bg</label>
564 <input type="text" class="form-control" placeholder="@brand-primary" data-var="@btn-primary-bg">
565 <label>@btn-primary-border</label>
566 <input type="text" class="form-control" placeholder="@btn-primary-bg" data-var="@btn-primary-border">
568 <label>@btn-info-color</label>
569 <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-info-color">
570 <label>@btn-info-bg</label>
571 <input type="text" class="form-control" placeholder="@brand-info" data-var="@btn-info-bg">
572 <label>@btn-info-border</label>
573 <input type="text" class="form-control" placeholder="@btn-info-bg" data-var="@btn-info-border">
574 <h4>Button hover</h4>
575 <label>@btn-hover-color</label>
576 <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-hover-color">
578 <div class="col-lg-6">
580 <label>@btn-success-color</label>
581 <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-success-color">
582 <label>@btn-success-bg</label>
583 <input type="text" class="form-control" placeholder="@brand-success" data-var="@btn-success-bg">
584 <label>@btn-success-border</label>
585 <input type="text" class="form-control" placeholder="@btn-success-bg" data-var="@btn-success-border">
587 <label>@btn-warning-color</label>
588 <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-warning-color">
589 <label>@btn-warning-bg</label>
590 <input type="text" class="form-control" placeholder="@brand-warning" data-var="@btn-warning-bg">
591 <label>@btn-warning-border</label>
592 <input type="text" class="form-control" placeholder="@btn-warning-bg" data-var="@btn-warning-border">
594 <label>@btn-danger-color</label>
595 <input type="text" class="form-control" placeholder="@btn-default-color" data-var="@btn-danger-color">
596 <label>@btn-danger-bg</label>
597 <input type="text" class="form-control" placeholder="@brand-danger" data-var="@btn-danger-bg">
598 <label>@btn-danger-border</label>
599 <input type="text" class="form-control" placeholder="@btn-danger-bg" data-var="@btn-danger-border">
603 <h2 id="variables-form-states">Form states and alerts</h2>
604 <p>Define colors for form feedback states and, by default, alerts.</p>
606 <div class="col-lg-6">
608 <label>@state-success-text</label>
609 <input type="text" class="form-control" placeholder="#468847" data-var="@state-success-text">
610 <label>@state-success-bg</label>
611 <input type="text" class="form-control" placeholder="#dff0d8" data-var="@state-success-bg">
612 <label>@state-success-border</label>
613 <input type="text" class="form-control" placeholder="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border">
615 <label>@state-warning-text</label>
616 <input type="text" class="form-control" placeholder="#c09853" data-var="@state-warning-text">
617 <label>@state-warning-bg</label>
618 <input type="text" class="form-control" placeholder="#fcf8e3" data-var="@state-warning-bg">
619 <label>@state-warning-border</label>
620 <input type="text" class="form-control" placeholder="darken(spin(@state-warning-bg, -10), 3%)" data-var="@state-warning-border">
622 <div class="col-lg-6">
624 <label>@state-danger-text</label>
625 <input type="text" class="form-control" placeholder="#b94a48" data-var="@state-danger-text">
626 <label>@state-danger-bg</label>
627 <input type="text" class="form-control" placeholder="#f2dede" data-var="@state-danger-bg">
628 <label>@state-danger-border</label>
629 <input type="text" class="form-control" placeholder="darken(spin(@state-danger-bg, -10), 3%)" data-var="@state-danger-border">
631 <label>@state-info-text</label>
632 <input type="text" class="form-control" placeholder="#3a87ad" data-var="@state-info-text">
633 <label>@state-info-bg</label>
634 <input type="text" class="form-control" placeholder="#d9edf7" data-var="@state-info-bg">
635 <label>@state-info-border</label>
636 <input type="text" class="form-control" placeholder="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border">
640 <h2 id="variables-alerts">Alerts</h2>
641 <p>Define alert colors, border radius, and padding.</p>
642 <h4>Border radius</h4>
643 <label>@alert-padding</label>
644 <input type="text" class="form-control" placeholder="15px" data-var="@alert-padding">
645 <label>@alert-border-radius</label>
646 <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@alert-border-radius">
648 <div class="col-lg-6">
649 <h4>Default (Warning)</h4>
650 <label>@alert-text</label>
651 <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@alert-text">
652 <label>@alert-bg</label>
653 <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@alert-bg">
654 <label>@alert-border</label>
655 <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@alert-border">
657 <label>@alert-success-text</label>
658 <input type="text" class="form-control" placeholder="@state-success-text" data-var="@alert-success-text">
659 <label>@alert-success-bg</label>
660 <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@alert-success-bg">
661 <label>@alert-success-border</label>
662 <input type="text" class="form-control" placeholder="@state-success-border" data-var="@alert-success-border">
664 <div class="col-lg-6">
666 <label>@alert-danger-text</label>
667 <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@alert-danger-text">
668 <label>@alert-danger-bg</label>
669 <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@alert-danger-bg">
670 <label>@alert-danger-border</label>
671 <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@alert-danger-border">
673 <label>@alert-info-text</label>
674 <input type="text" class="form-control" placeholder="@state-info-text" data-var="@alert-info-text">
675 <label>@alert-info-bg</label>
676 <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@alert-info-bg">
677 <label>@alert-info-border</label>
678 <input type="text" class="form-control" placeholder="@state-info-border" data-var="@alert-info-border">
682 <h2 id="variables-navbar">Navbar</h2>
684 <div class="col-lg-6">
685 <h3>Default navbar</h3>
687 <label>@navbar-height</label>
688 <input type="text" class="form-control" placeholder="50px" data-var="@navbar-height">
689 <label>@navbar-margin-bottom</label>
690 <input type="text" class="form-control" placeholder="@line-height-computed" data-var="@navbar-margin-bottom">
691 <label>@navbar-default-color</label>
692 <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-color">
693 <label>@navbar-default-bg</label>
694 <input type="text" class="form-control" placeholder="#eee" data-var="@navbar-default-bg">
695 <label>@navbar-border-radius</label>
696 <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@navbar-border-radius">
698 <label>@navbar-default-link-color</label>
699 <input type="text" class="form-control" placeholder="#777" data-var="@navbar-default-link-color">
700 <label>@navbar-default-link-hover-color</label>
701 <input type="text" class="form-control" placeholder="#333" data-var="@navbar-default-link-hover-color">
702 <label>@navbar-default-link-hover-bg</label>
703 <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-hover-bg">
704 <label>@navbar-default-link-active-color</label>
705 <input type="text" class="form-control" placeholder="#555" data-var="@navbar-default-link-active-color">
706 <label>@navbar-default-link-active-bg</label>
707 <input type="text" class="form-control" placeholder="darken(@navbar-bg, 10%)" data-var="@navbar-default-link-active-bg">
708 <label>@navbar-default-link-disabled-color</label>
709 <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-link-disabled-color">
710 <label>@navbar-default-link-disabled-bg</label>
711 <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-link-disabled-bg">
713 <label>@navbar-default-brand-color</label>
714 <input type="text" class="form-control" placeholder="@navbar-link-color" data-var="@navbar-default-brand-color">
715 <label>@navbar-default-brand-hover-color</label>
716 <input type="text" class="form-control" placeholder="darken(@navbar-link-color, 10%)" data-var="@navbar-default-brand-hover-color">
717 <label>@navbar-default-brand-hover-bg</label>
718 <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-default-brand-hover-bg">
720 <label>@navbar-default-toggle-hover-bg</label>
721 <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-hover-bg">
722 <label>@navbar-default-toggle-icon-bar-bg</label>
723 <input type="text" class="form-control" placeholder="#ccc" data-var="@navbar-default-toggle-icon-bar-bg">
724 <label>@navbar-default-toggle-border-color</label>
725 <input type="text" class="form-control" placeholder="#ddd" data-var="@navbar-default-toggle-border-color">
727 <div class="col-lg-6">
728 <h3>Inverted navbar</h3>
730 <label>@navbar-inverse-color</label>
731 <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-color">
732 <label>@navbar-inverse-bg</label>
733 <input type="text" class="form-control" placeholder="#222" data-var="@navbar-inverse-bg">
735 <label>@navbar-inverse-link-color</label>
736 <input type="text" class="form-control" placeholder="@gray-light" data-var="@navbar-inverse-link-color">
737 <label>@navbar-inverse-link-hover-color</label>
738 <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-link-hover-color">
739 <label>@navbar-inverse-link-hover-bg</label>
740 <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-hover-bg">
741 <label>@navbar-inverse-link-active-color</label>
742 <input type="text" class="form-control" placeholder="@navbar-inverse-link-hover-color" data-var="@navbar-inverse-link-active-color">
743 <label>@navbar-inverse-link-active-bg</label>
744 <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)" data-var="@navbar-inverse-link-active-bg">
745 <label>@navbar-inverse-link-disabled-color</label>
746 <input type="text" class="form-control" placeholder="#444" data-var="@navbar-inverse-link-disabled-color">
747 <label>@navbar-inverse-link-disabled-bg</label>
748 <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-link-disabled-bg">
750 <label>@navbar-inverse-brand-color</label>
751 <input type="text" class="form-control" placeholder="@navbar-inverse-link-color" data-var="@navbar-inverse-brand-color">
752 <label>@navbar-inverse-brand-hover-color</label>
753 <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-brand-hover-color">
754 <label>@navbar-inverse-brand-hover-bg</label>
755 <input type="text" class="form-control" placeholder="transparent" data-var="@navbar-inverse-brand-hover-bg">
757 <label>@navbar-inverse-toggle-hover-bg</label>
758 <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-hover-bg">
759 <label>@navbar-inverse-toggle-icon-bar-bg</label>
760 <input type="text" class="form-control" placeholder="#fff" data-var="@navbar-inverse-toggle-icon-bar-bg">
761 <label>@navbar-inverse-toggle-border-color</label>
762 <input type="text" class="form-control" placeholder="#333" data-var="@navbar-inverse-toggle-border-color">
767 <h2 id="variables-nav">Nav</h2>
771 <div class="col-lg-6">
772 <h4>Common values</h4>
773 <label>@nav-link-padding</label>
774 <input type="text" class="form-control" placeholder="10px 15px" data-var="@nav-link-padding">
775 <label>@nav-link-hover-bg</label>
776 <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-link-hover-bg">
777 <label>@nav-disabled-link-color</label>
778 <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-color">
779 <label>@nav-disabled-link-hover-color</label>
780 <input type="text" class="form-control" placeholder="@gray-light" data-var="@nav-disabled-link-hover-color">
781 <label>@nav-open-link-hover-color</label>
782 <input type="text" class="form-control" placeholder="#fff" data-var="@nav-open-link-hover-color">
783 <label>@nav-open-caret-border-color</label>
784 <input type="text" class="form-control" placeholder="@fff" data-var="@nav-open-caret-border-color">
787 <label>@nav-pills-active-link-hover-color</label>
788 <input type="text" class="form-control" placeholder="@fff" data-var="@nav-pills-active-link-hover-color">
789 <label>@nav-pills-active-link-hover-bg</label>
790 <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@nav-pills-active-link-hover-bg">
792 <div class="col-lg-6">
794 <label>@nav-tabs-border-color</label>
795 <input type="text" class="form-control" placeholder="@ddd" data-var="@nav-tabs-border-color">
796 <label>@nav-tabs-link-hover-border-color</label>
797 <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@nav-tabs-link-hover-border-color">
798 <label>@nav-tabs-active-link-hover-color</label>
799 <input type="text" class="form-control" placeholder="@gray" data-var="@nav-tabs-active-link-hover-color">
800 <label>@nav-tabs-active-link-hover-bg</label>
801 <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-tabs-active-link-hover-bg">
802 <label>@nav-tabs-active-link-hover-border-color</label>
803 <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-active-link-hover-border-color">
804 <label>@nav-tabs-justified-link-border-color</label>
805 <input type="text" class="form-control" placeholder="#ddd" data-var="@nav-tabs-justified-link-border-color">
806 <label>@nav-tabs-justified-active-link-border-color</label>
807 <input type="text" class="form-control" placeholder="@body-bg" data-var="@nav-tabs-justified-active-link-border-color">
812 <h2 id="variables-tables">Tables</h2>
814 <div class="col-lg-6">
815 <label>@table-bg</label>
816 <input type="text" class="form-control" placeholder="transparent" data-var="@table-bg">
817 <p class="help-block">Default background color used for all tables.</p>
818 <label>@table-bg-accent</label>
819 <input type="text" class="form-control" placeholder="#f9f9f9" data-var="@table-bg-accent">
820 <p class="help-block">Background color used for <code>.table-striped</code>.</p>
822 <div class="col-lg-6">
823 <label>@table-bg-hover</label>
824 <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@table-bg-hover">
825 <p class="help-block">Background color used for <code>.table-hover</code>.</p>
826 <label>@table-border-color</label>
827 <input type="text" class="form-control" placeholder="#ddd" data-var="@table-border-color">
828 <p class="help-block">Border color for table and cell borders.</p>
832 <h2 id="variables-forms">Forms</h2>
834 <div class="col-lg-6">
836 <label>@input-color</label>
837 <input type="text" class="form-control" placeholder="@gray" data-var="@input-color">
838 <p class="help-block">Text color for <code><input></code>s</p>
839 <label>@input-bg</label>
840 <input type="text" class="form-control" placeholder="#fff" data-var="@input-bg">
841 <p class="help-block"><code><input></code> background color</p>
842 <label>@input-border</label>
843 <input type="text" class="form-control" placeholder="#ccc" data-var="@input-border">
844 <p class="help-block"><code><input></code> border color</p>
845 <label>@input-border-radius</label>
846 <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@input-border-radius">
847 <p class="help-block"><code><input></code> border radius</p>
848 <label>@input-bg-disabled</label>
849 <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-bg-disabled">
850 <p class="help-block"><code><input disabled></code> background color</p>
852 <div class="col-lg-6">
854 <label>@input-color-placeholder</label>
855 <input type="text" class="form-control" placeholder="@gray-light" data-var="@input-color-placeholder">
856 <p class="help-block">Placeholder text color</p>
859 <label>@legend-color</label>
860 <input type="text" class="form-control" placeholder="@gray" data-var="@legend-color">
861 <label>@legend-border-color</label>
862 <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@legend-border-color">
864 <h3>Input groups</h3>
865 <label>@input-group-addon-bg</label>
866 <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@input-group-addon-bg">
867 <p class="help-block">Background color for textual input addons</p>
868 <label>@input-group-addon-border-color</label>
869 <input type="text" class="form-control" placeholder="@input-border" data-var="@input-group-addon-border-color">
870 <p class="help-block">Border color for textual input addons</p>
874 <h2 id="variables-dropdowns">Dropdowns</h2>
876 <div class="col-lg-6">
877 <h3>Dropdown menu</h3>
878 <label>@dropdown-bg</label>
879 <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-bg">
880 <p class="help-block">Dropdown menu background color</p>
881 <label>@dropdown-border</label>
882 <input type="text" class="form-control" placeholder="rgba(0,0,0,.15)" data-var="@dropdown-border">
883 <p class="help-block">Dropdown menu border color</p>
884 <label>@dropdown-fallback-border</label>
885 <input type="text" class="form-control" placeholder="#ccc" data-var="@dropdown-fallback-border">
886 <p class="help-block">Dropdown menu border color <strong>for IE8</strong></p>
887 <label>@dropdown-caret-color</label>
888 <input type="text" class="form-control" placeholder="@dropdown-caret-color" data-var="@dropdown-caret-color">
889 <p class="help-block">Indicator arrow for showing an element has a dropdown</p>
890 <label>@dropdown-divider-bg</label>
891 <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@dropdown-divider-bg">
892 <p class="help-block">Dropdown divider top border color</p>
893 <label>@dropdown-header-color</label>
894 <input type="text" class="form-control" placeholder="@gray-light" data-var="@dropdown-header-color">
895 <p class="help-block">Text color for headers within dropdown menus</p>
897 <div class="col-lg-6">
898 <h3>Dropdown items</h3>
899 <label>@dropdown-link-color</label>
900 <input type="text" class="form-control" placeholder="@gray-dark" data-var="@dropdown-link-color">
901 <p class="help-block">Dropdown text color</p>
903 <label>@dropdown-link-hover-color</label>
904 <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-hover-color">
905 <p class="help-block">Hovered dropdown menu entry text color</p>
906 <label>@dropdown-link-hover-bg</label>
907 <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-hover-bg">
908 <p class="help-block">Hovered dropdown menu entry text color</p>
910 <label>@dropdown-link-active-color</label>
911 <input type="text" class="form-control" placeholder="#fff" data-var="@dropdown-link-active-color">
912 <p class="help-block">Active dropdown menu entry text color</p>
913 <label>@dropdown-link-active-bg</label>
914 <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@dropdown-link-active-bg">
915 <p class="help-block">Active dropdown menu entry background color</p>
917 <label>@dropdown-link-disabled-color</label>
918 <input type="text" class="form-control" placeholder="@dropdown-link-disabled-color" data-var="@dropdown-link-disabled-color">
919 <p class="help-block">Disabled dropdown menu entry background color</p>
923 <h2 id="variables-panels-wells">Panels and wells</h2>
924 <h3>Common panel styles</h3>
926 <div class="col-lg-6">
927 <label>@panel-bg</label>
928 <input type="text" class="form-control" placeholder="#fff" data-var="@panel-bg">
929 <label>@panel-inner-border</label>
930 <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-inner-border">
931 <p class="help-block">Border color for elements within panels</p>
933 <div class="col-lg-6">
934 <label>@panel-border-radius</label>
935 <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@panel-border-radius">
936 <label>@panel-footer-bg</label>
937 <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-footer-bg">
940 <h3>Contextual panel colors</h3>
942 <div class="col-lg-6">
944 <label>@panel-default-text</label>
945 <input type="text" class="form-control" placeholder="@gray-dark" data-var="@panel-default-text">
946 <label>@panel-default-border</label>
947 <input type="text" class="form-control" placeholder="#ddd" data-var="@panel-default-border">
948 <label>@panel-default-heading-bg</label>
949 <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@panel-default-heading-bg">
951 <label>@panel-primary-text</label>
952 <input type="text" class="form-control" placeholder="#fff" data-var="@panel-primary-text">
953 <label>@panel-primary-border</label>
954 <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-border">
955 <label>@panel-primary-heading-bg</label>
956 <input type="text" class="form-control" placeholder="@brand-primary" data-var="@panel-primary-heading-bg">
958 <label>@panel-success-text</label>
959 <input type="text" class="form-control" placeholder="@state-success-text" data-var="@panel-success-text">
960 <label>@panel-success-border</label>
961 <input type="text" class="form-control" placeholder="@state-success-border" data-var="@panel-success-border">
962 <label>@panel-success-heading-bg</label>
963 <input type="text" class="form-control" placeholder="@state-success-bg" data-var="@panel-success-heading-bg">
965 <div class="col-lg-6">
967 <label>@panel-info-text</label>
968 <input type="text" class="form-control" placeholder="@state-info-text" data-var="@panel-info-text">
969 <label>@panel-info-border</label>
970 <input type="text" class="form-control" placeholder="@state-info-border" data-var="@panel-info-border">
971 <label>@panel-info-heading-bg</label>
972 <input type="text" class="form-control" placeholder="@state-info-bg" data-var="@panel-info-heading-bg">
974 <label>@panel-warning-text</label>
975 <input type="text" class="form-control" placeholder="@state-warning-text" data-var="@panel-warning-text">
976 <label>@panel-warning-border</label>
977 <input type="text" class="form-control" placeholder="@state-warning-border" data-var="@panel-warning-border">
978 <label>@panel-warning-heading-bg</label>
979 <input type="text" class="form-control" placeholder="@state-warning-bg" data-var="@panel-warning-heading-bg">
981 <label>@panel-danger-text</label>
982 <input type="text" class="form-control" placeholder="@state-danger-text" data-var="@panel-danger-text">
983 <label>@panel-danger-border</label>
984 <input type="text" class="form-control" placeholder="@state-danger-border" data-var="@panel-danger-border">
985 <label>@panel-danger-heading-bg</label>
986 <input type="text" class="form-control" placeholder="@state-danger-bg" data-var="@panel-danger-heading-bg">
991 <label>@well-bg</label>
992 <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@well-bg">
994 <h2 id="variables-accordion">Accordion</h2>
995 <label>@accordion-border-bg</label>
996 <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@accordion-border-bg">
998 <h2 id="variables-badges">Badges</h2>
1000 <div class="col-lg-6">
1001 <label>@badge-color</label>
1002 <input type="text" class="form-control" placeholder="#fff" data-var="@badge-color">
1003 <p>Badge text color</p>
1004 <label>@badge-bg</label>
1005 <input type="text" class="form-control" placeholder="@gray-light" data-var="@badge-bg">
1006 <p>Badge background color</p>
1007 <label>@badge-link-hover-color</label>
1008 <input type="text" class="form-control" placeholder="#fff" data-var="@badge-link-hover-color">
1009 <p>Linked badge text color on hover</p>
1011 <div class="col-lg-6">
1012 <label>@badge-active-color</label>
1013 <input type="text" class="form-control" placeholder="@link-color" data-var="@badge-active-color">
1014 <p>Badge text color in active nav link</p>
1015 <label>@badge-active-bg</label>
1016 <input type="text" class="form-control" placeholder="#fff" data-var="@badge-active-bg">
1017 <p>Badge text color in active nav link</p>
1021 <h2 id="variables-breadcrumbs">Breadcrumbs</h2>
1023 <div class="col-lg-4">
1024 <label>@breadcrumb-color</label>
1025 <input type="text" class="form-control" placeholder="#ccc" data-var="@breadcrumb-color">
1026 <p>Breadcrumb text color</p>
1028 <div class="col-lg-4">
1029 <label>@breadcrumb-bg</label>
1030 <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@breadcrumb-bg">
1031 <p>Breadcrumb background color</p>
1033 <div class="col-lg-4">
1034 <label>@breadcrumb-active-color</label>
1035 <input type="text" class="form-control" placeholder="@gray-light" data-var="@breadcrumb-active-color">
1036 <p>Text color of current page in the breadcrumb</p>
1040 <h2 id="variables-jumbotron">Jumbotron</h2>
1042 <div class="col-lg-3">
1043 <label>@jumbotron-padding</label>
1044 <input type="text" class="form-control" placeholder="30px" data-var="@jumbotron-padding">
1046 <div class="col-lg-3">
1047 <label>@jumbotron-bg</label>
1048 <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@jumbotron-bg">
1050 <div class="col-lg-3">
1051 <label>@jumbotron-color</label>
1052 <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-color">
1054 <div class="col-lg-3">
1055 <label>@jumbotron-heading-color</label>
1056 <input type="text" class="form-control" placeholder="inherit" data-var="@jumbotron-heading-color">
1060 <h2 id="variables-modals">Modals</h2>
1062 <div class="col-lg-4">
1063 <label>@modal-inner-padding</label>
1064 <input type="text" class="form-control" placeholder="20px" data-var="@modal-inner-padding">
1065 <p class="help-block">Padding applied to the modal body</p>
1067 <div class="col-lg-4">
1068 <label>@modal-title-padding</label>
1069 <input type="text" class="form-control" placeholder="15px" data-var="@modal-title-padding">
1070 <p class="help-block">Padding applied to the modal title</p>
1072 <div class="col-lg-4">
1073 <label>@modal-title-line-height</label>
1074 <input type="text" class="form-control" placeholder="@line-height-base" data-var="@modal-title-line-height">
1075 <p class="help-block">Modal title line-height</p>
1077 <div class="col-lg-4">
1078 <label>@modal-content-bg</label>
1079 <input type="text" class="form-control" placeholder="#fff" data-var="@modal-content-bg">
1080 <p class="help-block">Background color of modal content area</p>
1082 <div class="col-lg-4">
1083 <label>@modal-content-border-color</label>
1084 <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@modal-content-border-color">
1085 <p class="help-block">Modal content border color</p>
1087 <div class="col-lg-4">
1088 <label>@modal-content-fallback-border-color</label>
1089 <input type="text" class="form-control" placeholder="#999" data-var="@modal-content-fallback-border-color">
1090 <p class="help-block">Modal content border color <strong>for IE8</strong></p>
1092 <div class="col-lg-4">
1093 <label>@modal-backdrop-bg</label>
1094 <input type="text" class="form-control" placeholder="#000" data-var="@modal-backdrop-bg">
1095 <p class="help-block">Modal backdrop background color</p>
1097 <div class="col-lg-4">
1098 <label>@modal-header-border-color</label>
1099 <input type="text" class="form-control" placeholder="#e5e5e5" data-var="@modal-header-border-color">
1100 <p class="help-block">Modal header border color</p>
1102 <div class="col-lg-4">
1103 <label>@modal-footer-border-color</label>
1104 <input type="text" class="form-control" placeholder="@modal-header-border-color" data-var="@modal-footer-border-color">
1105 <p class="help-block">Modal footer border color</p>
1109 <h2 id="variables-carousel">Carousel</h2>
1110 <label>@carousel-text-shadow</label>
1111 <input type="text" class="form-control" placeholder="0 1px 2px rgba(0,0,0,.6)" data-var="@carousel-text-shadow">
1112 <label>@carousel-control-color</label>
1113 <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-control-color">
1114 <label>@carousel-indicator-border-color</label>
1115 <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-border-color">
1116 <label>@carousel-indicator-active-bg</label>
1117 <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-indicator-active-bg">
1118 <label>@carousel-caption-color</label>
1119 <input type="text" class="form-control" placeholder="#fff" data-var="@carousel-caption-color">
1121 <h2 id="variables-list-group">List group</h2>
1124 <div class="col-lg-4">
1125 <label>@list-group-bg</label>
1126 <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-bg">
1127 <p class="help-block">Default background color</p>
1129 <div class="col-lg-4">
1130 <label>@list-group-hover-bg</label>
1131 <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@list-group-hover-bg">
1132 <p class="help-block">Background color of single list elements on hover</p>
1134 <div class="col-lg-4">
1135 <label>@list-group-active-bg</label>
1136 <input type="text" class="form-control" placeholder="@component-active-bg" data-var="@list-group-active-bg">
1137 <p class="help-block">Background color of active list elements</p>
1142 <div class="col-lg-4">
1143 <label>@list-group-border</label>
1144 <input type="text" class="form-control" placeholder="#ddd" data-var="@list-group-border">
1145 <p class="help-block">Default border color</p>
1147 <div class="col-lg-4">
1148 <label>@list-group-border-radius</label>
1149 <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@list-group-border-radius">
1150 <p class="help-block">List group border radius</p>
1152 <div class="col-lg-4">
1153 <label>@list-group-active-border</label>
1154 <input type="text" class="form-control" placeholder="@list-group-active-bg" data-var="@list-group-active-border">
1155 <p class="help-block">Border color of active list elements</p>
1158 <label>@list-group-active-color</label>
1159 <input type="text" class="form-control" placeholder="#fff" data-var="@list-group-active-color">
1160 <p class="help-block">Text color of active list elements</p>
1161 <h2 id="variables-thumbnails">Thumbnails</h2>
1163 <div class="col-lg-6">
1164 <label>@thumbnail-padding</label>
1165 <input type="text" class="form-control" placeholder="4px" data-var="@thumbnail-padding">
1166 <p class="help-block">Padding around the thumbnail image</p>
1167 <label>@thumbnail-bg</label>
1168 <input type="text" class="form-control" placeholder="@body-bg" data-var="@thumbnail-bg">
1169 <p class="help-block">Thumbnail background color</p>
1170 <label>@thumbnail-border</label>
1171 <input type="text" class="form-control" placeholder="#ddd" data-var="@thumbnail-border">
1172 <p class="help-block">Thumbnail border color</p>
1173 <label>@thumbnail-border-radius</label>
1174 <input type="text" class="form-control" placeholder="@border-radius-base" data-var="@thumbnail-border-radius">
1175 <p class="help-block">Thumbnail border radius</p>
1177 <div class="col-lg-6">
1178 <label>@thumbnail-caption-padding</label>
1179 <input type="text" class="form-control" placeholder="@text-color" data-var="@thumbnail-caption-padding">
1180 <p class="help-block">Padding around the thumbnail caption</p>
1181 <label>@thumbnail-caption-color</label>
1182 <input type="text" class="form-control" placeholder="@text-color" data-var="@thumbnail-caption-color">
1183 <p class="help-block">Custom text color for thumbnail captions</p>
1186 <h2 id="variables-progress">Progress bars</h2>
1188 <div class="col-lg-4">
1189 <label>@progress-bg</label>
1190 <input type="text" class="form-control" placeholder="#f5f5f5" data-var="@progress-bg">
1191 <p class="help-block">Background color of the whole progress component</p>
1193 <div class="col-lg-4">
1194 <label>@progress-bar-bg</label>
1195 <input type="text" class="form-control" placeholder="@brand-primary" data-var="@progress-bar-bg">
1196 <p class="help-block">Default progress bar color</p>
1198 <div class="col-lg-4">
1199 <label>@progress-bar-success-bg</label>
1200 <input type="text" class="form-control" placeholder="@brand-success" data-var="@progress-bar-success-bg">
1201 <p class="help-block">Success progress bar color</p>
1205 <div class="col-lg-4">
1206 <label>@progress-bar-warning-bg</label>
1207 <input type="text" class="form-control" placeholder="@brand-warning" data-var="@progress-bar-warning-bg">
1208 <p class="help-block">Warning progress bar color</p>
1210 <div class="col-lg-4">
1211 <label>@progress-bar-danger-bg</label>
1212 <input type="text" class="form-control" placeholder="@brand-danger" data-var="@progress-bar-danger-bg">
1213 <p class="help-block">Danger progress bar color</p>
1215 <div class="col-lg-4">
1216 <label>@progress-bar-info-bg</label>
1217 <input type="text" class="form-control" placeholder="@brand-info" data-var="@progress-bar-info-bg">
1218 <p class="help-block">Info progress bar color</p>
1220 <div class="col-lg-4">
1221 <label>@progress-bar-color</label>
1222 <input type="text" class="form-control" placeholder="#fff" data-var="@progress-bar-color">
1223 <p class="help-block">Info progress bar text color</p>
1225 <div class="col-lg-4">
1226 <label>@progress-bar-text-shadow</label>
1227 <input type="text" class="form-control" placeholder="0 -1px 0 rgba(0,0,0,.25)" data-var="@progress-bar-text-shadow">
1228 <p class="help-block">Info progress bar text shadow</p>
1231 <h2 id="variables-pagination">Pagination</h2>
1233 <div class="col-lg-4">
1234 <label>@pagination-bg</label>
1235 <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-bg">
1236 <p class="help-block">Background color</p>
1238 <div class="col-lg-4">
1239 <label>@pagination-border</label>
1240 <input type="text" class="form-control" placeholder="#ddd" data-var="@pagination-border">
1241 <p class="help-block">Border color</p>
1243 <div class="col-lg-4">
1244 <label>@pagination-active-bg</label>
1245 <input type="text" class="form-control" placeholder="@brand-primary" data-var="@pagination-active-bg">
1246 <p class="help-block">Active background color</p>
1248 <div class="col-lg-4">
1249 <label>@pagination-active-color</label>
1250 <input type="text" class="form-control" placeholder="#fff" data-var="@pagination-active-color">
1251 <p class="help-block">Active text color</p>
1253 <div class="col-lg-4">
1254 <label>@pagination-disabled-color</label>
1255 <input type="text" class="form-control" placeholder="@gray-light" data-var="@pagination-disabled-color">
1256 <p class="help-block">Disabled text color</p>
1259 <h2 id="variables-pager">Pager</h2>
1261 <div class="col-lg-4">
1262 <label>@pager-border-radius</label>
1263 <input type="text" class="form-control" placeholder="15px" data-var="@pager-border-radius">
1264 <p class="help-block">Pager border radius</p>
1266 <div class="col-lg-4">
1267 <label>@pager-disabled-color</label>
1268 <input type="text" class="form-control" placeholder="@gray-light" data-var="@pager-disabled-color">
1269 <p class="help-block">Pager disabled state color</p>
1273 <h2 id="variables-labels">Labels</h2>
1275 <div class="col-lg-6">
1276 <label>@label-default-bg</label>
1277 <input type="text" class="form-control" placeholder="@gray-light" data-var="@label-default-bg">
1278 <p class="help-block">Default label background color</p>
1279 <label>@label-primary-bg</label>
1280 <input type="text" class="form-control" placeholder="@brand-primary" data-var="@label-primary-bg">
1281 <p class="help-block">Primary label background color</p>
1282 <label>@label-success-bg</label>
1283 <input type="text" class="form-control" placeholder="@brand-success" data-var="@label-success-bg">
1284 <p class="help-block">Success label background color</p>
1286 <div class="col-lg-6">
1287 <label>@label-info-bg</label>
1288 <input type="text" class="form-control" placeholder="@brand-info" data-var="@label-info-bg">
1289 <p class="help-block">Info label background color</p>
1290 <label>@label-warning-bg</label>
1291 <input type="text" class="form-control" placeholder="@brand-warning" data-var="@label-warning-bg">
1292 <p class="help-block">Warning label background color</p>
1293 <label>@label-danger-bg</label>
1294 <input type="text" class="form-control" placeholder="@brand-danger" data-var="@label-danger-bg">
1295 <p class="help-block">Danger label background color</p>
1298 <h2 id="variables-tooltips-popovers">Tooltips and popovers</h2>
1299 <h3>Tooltip styles</h3>
1301 <div class="col-lg-6">
1302 <label>@tooltip-color</label>
1303 <input type="text" class="form-control" placeholder="#fff" data-var="@tooltip-color">
1304 <p class="help-block">Tooltip text color</p>
1305 <label>@tooltip-bg</label>
1306 <input type="text" class="form-control" placeholder="rgba(0,0,0,.9)" data-var="@tooltip-bg">
1307 <p class="help-block">Tooltip background color</p>
1309 <div class="col-lg-6">
1310 <label>@tooltip-arrow-width</label>
1311 <input type="text" class="form-control" placeholder="5px" data-var="@tooltip-arrow-width">
1312 <p class="help-block">Tooltip arrow width</p>
1313 <label>@tooltip-arrow-color</label>
1314 <input type="text" class="form-control" placeholder="@tooltip-bg" data-var="@tooltip-arrow-color">
1315 <p class="help-block">Tooltip arrow color</p>
1317 <div class="col-lg-6">
1318 <label>@tooltip-max-width</label>
1319 <input type="text" class="form-control" placeholder="200px" data-var="@tooltip-max-width">
1320 <p class="help-block">Tooltip max width</p>
1323 <h3>Popover styles</h3>
1325 <div class="col-lg-6">
1326 <label>@popover-bg</label>
1327 <input type="text" class="form-control" placeholder="#fff" data-var="@popover-bg">
1328 <p class="help-block">Popover body background color</p>
1329 <label>@popover-title-bg</label>
1330 <input type="text" class="form-control" placeholder="darken(@popover-bg, 3%)" data-var="@popover-title-bg">
1331 <p class="help-block">Popover title background color</p>
1333 <div class="col-lg-6">
1334 <label>@popover-arrow-width</label>
1335 <input type="text" class="form-control" placeholder="10px" data-var="@popover-arrow-width">
1336 <p class="help-block">Popover arrow width</p>
1337 <label>@popover-arrow-color</label>
1338 <input type="text" class="form-control" placeholder="#fff" data-var="@popover-arrow-color">
1339 <p class="help-block">Popover arrow color</p>
1343 <div class="col-lg-6">
1344 <label>@popover-arrow-outer-width</label>
1345 <input type="text" class="form-control" placeholder="(@popover-arrow-width 1)" data-var="@popover-arrow-outer-width">
1346 <p class="help-block">Popover outer arrow width</p>
1348 <div class="col-lg-6">
1349 <label>@popover-arrow-outer-color</label>
1350 <input type="text" class="form-control" placeholder="rgba(0,0,0,.25)" data-var="@popover-arrow-outer-color">
1351 <p class="help-block">Popover outer arrow color</p>
1353 <div class="col-lg-6">
1354 <label>@popover-arrow-outer-fallback-color</label>
1355 <input type="text" class="form-control" placeholder="#999" data-var="@popover-arrow-outer-fallback-color">
1356 <p class="help-block">Popover outer arrow fallback color</p>
1360 <div class="col-lg-6">
1361 <label>@popover-max-width</label>
1362 <input type="text" class="form-control" placeholder="276px" data-var="@popover-max-width">
1363 <p class="help-block">Popover maximum width</p>
1365 <div class="col-lg-6">
1366 <label>@popover-border-color</label>
1367 <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)" data-var="@popover-border-color">
1368 <p class="help-block">Popover border color</p>
1370 <div class="col-lg-6">
1371 <label>@popover-fallback-border-color</label>
1372 <input type="text" class="form-control" placeholder="#ccc" data-var="@popover-fallback-border-color">
1373 <p class="help-block">Popover fallback border color</p>
1377 <h2 id="variables-close">Close button</h2>
1379 <div class="col-lg-6">
1380 <label>@close-color</label>
1381 <input type="text" class="form-control" placeholder="#000" data-var="@close-color">
1383 <div class="col-lg-6">
1384 <label>@close-text-shadow</label>
1385 <input type="text" class="form-control" placeholder="0 1px 0 #fff" data-var="@close-text-shadow">
1389 <h2 id="variables-type">Type</h2>
1391 <div class="col-lg-6">
1392 <label>@text-muted</label>
1393 <input type="text" class="form-control" placeholder="@gray-light" data-var="@text-muted">
1394 <p class="help-block">Text muted color</p>
1396 <div class="col-lg-6">
1397 <label>@abbr-border-color</label>
1398 <input type="text" class="form-control" placeholder="@gray-light" data-var="@abbr-border-color">
1399 <p class="help-block">Abbreviations and acronyms border color</p>
1401 <div class="col-lg-6">
1402 <label>@headings-small-color</label>
1403 <input type="text" class="form-control" placeholder="@gray-light" data-var="@headings-small-color">
1404 <p class="help-block">Headings small color</p>
1406 <div class="col-lg-6">
1407 <label>@blockquote-small-color</label>
1408 <input type="text" class="form-control" placeholder="@gray-light" data-var="@blockquote-small-color">
1409 <p class="help-block">Blockquote small color</p>
1411 <div class="col-lg-6">
1412 <label>@blockquote-border-color</label>
1413 <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@blockquote-border-color">
1414 <p class="help-block">Blockquote border color</p>
1416 <div class="col-lg-6">
1417 <label>@page-header-border-color</label>
1418 <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@page-header-border-color">
1419 <p class="help-block">Page header border color</p>
1422 <h2 id="variables-other">Other</h2>
1424 <div class="col-lg-6">
1425 <label>@hr-border</label>
1426 <input type="text" class="form-control" placeholder="@gray-lighter" data-var="@hr-border">
1427 <p class="help-block">Horizontal line color</p>
1429 <div class="col-lg-6">
1430 <label>@component-offset-horizontal</label>
1431 <input type="text" class="form-control" placeholder="180px" data-var="@component-offset-horizontal">
1432 <p class="help-block">Horizontal offset for forms and lists</p>
1437 <div class="bs-docs-section">
1438 <div class="page-header">
1439 <h1 id="download">Download</h1>
1441 <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>
1442 <div class="bs-customize-download">
1443 <button id="btn-compile" class="btn btn-block btn-lg btn-outline" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Compile and Download</button>
1445 </div><!-- /download -->