bootstrap/docs/_includes/customizer-variables.html

<!-- NOTE: DO NOT EDIT THE FOLLOWING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->
<h2 id="components">Components</h2>
<p>Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).</p>
<div class="row">
  <div class="bs-customizer-input">
    <label for="input-@padding-base-vertical">@padding-base-vertical</label>
    <input id="input-@padding-base-vertical" type="text" value="6px" data-var="@padding-base-vertical" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@padding-base-horizontal">@padding-base-horizontal</label>
    <input id="input-@padding-base-horizontal" type="text" value="12px" data-var="@padding-base-horizontal" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@padding-large-vertical">@padding-large-vertical</label>
    <input id="input-@padding-large-vertical" type="text" value="10px" data-var="@padding-large-vertical" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@padding-large-horizontal">@padding-large-horizontal</label>
    <input id="input-@padding-large-horizontal" type="text" value="16px" data-var="@padding-large-horizontal" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@padding-small-vertical">@padding-small-vertical</label>
    <input id="input-@padding-small-vertical" type="text" value="5px" data-var="@padding-small-vertical" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@padding-small-horizontal">@padding-small-horizontal</label>
    <input id="input-@padding-small-horizontal" type="text" value="10px" data-var="@padding-small-horizontal" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@padding-xs-vertical">@padding-xs-vertical</label>
    <input id="input-@padding-xs-vertical" type="text" value="1px" data-var="@padding-xs-vertical" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@padding-xs-horizontal">@padding-xs-horizontal</label>
    <input id="input-@padding-xs-horizontal" type="text" value="5px" data-var="@padding-xs-horizontal" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@line-height-large">@line-height-large</label>
    <input id="input-@line-height-large" type="text" value="1.33" data-var="@line-height-large" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@line-height-small">@line-height-small</label>
    <input id="input-@line-height-small" type="text" value="1.5" data-var="@line-height-small" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@border-radius-base">@border-radius-base</label>
    <input id="input-@border-radius-base" type="text" value="4px" data-var="@border-radius-base" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@border-radius-large">@border-radius-large</label>
    <input id="input-@border-radius-large" type="text" value="6px" data-var="@border-radius-large" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@border-radius-small">@border-radius-small</label>
    <input id="input-@border-radius-small" type="text" value="3px" data-var="@border-radius-small" class="form-control"/>
  </div>
</div>
<h2 id="tables">Tables</h2>
<p>Customizes the <code>.table</code> component with basic values, each used across all table variations.</p>
<div class="row">
  <div class="bs-customizer-input">
    <label for="input-@table-bg-hover">@table-bg-hover</label>
    <input id="input-@table-bg-hover" type="text" value="#f5f5f5" data-var="@table-bg-hover" class="form-control"/>
    <p class="help-block">Background color used for <code>.table-hover</code>.</p>
  </div>
</div>
<h2 id="media-queries-breakpoints">Media queries breakpoints</h2>
<p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
<div class="row">
  <div class="bs-customizer-input">
    <label for="input-@screen-xs">@screen-xs</label>
    <input id="input-@screen-xs" type="text" value="480px" data-var="@screen-xs" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@screen-sm">@screen-sm</label>
    <input id="input-@screen-sm" type="text" value="768px" data-var="@screen-sm" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@screen-md">@screen-md</label>
    <input id="input-@screen-md" type="text" value="992px" data-var="@screen-md" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@screen-lg">@screen-lg</label>
    <input id="input-@screen-lg" type="text" value="1200px" data-var="@screen-lg" class="form-control"/>
  </div>
</div>
<h2 id="grid-system">Grid system</h2>
<p>Define your custom responsive grid.</p>
<div class="row">
  <div class="bs-customizer-input">
    <label for="input-@grid-gutter-width">@grid-gutter-width</label>
    <input id="input-@grid-gutter-width" type="text" value="30px" data-var="@grid-gutter-width" class="form-control"/>
    <p class="help-block">Padding between columns. Gets divided in half for the left and right.</p>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@grid-float-breakpoint">@grid-float-breakpoint</label>
    <input id="input-@grid-float-breakpoint" type="text" value="768px" data-var="@grid-float-breakpoint" class="form-control"/>
    <p class="help-block">Point at which the navbar becomes uncollapsed.</p>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@container-smooth">@container-smooth</label>
    <input id="input-@container-smooth" type="text" value="@container-lg" data-var="@container-smooth" class="form-control"/>
    <p class="help-block">Maximum with of a smooth container.</p>
  </div>
</div>
<h2 id="navbar">Navbar</h2>
<p></p>
<div class="row">
  <div class="bs-customizer-input">
    <label for="input-@navbar-height">@navbar-height</label>
    <input id="input-@navbar-height" type="text" value="50px" data-var="@navbar-height" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navbar-padding-horizontal">@navbar-padding-horizontal</label>
    <input id="input-@navbar-padding-horizontal" type="text" value="floor((@grid-gutter-width / 2))" data-var="@navbar-padding-horizontal" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navbar-padding-vertical">@navbar-padding-vertical</label>
    <input id="input-@navbar-padding-vertical" type="text" value="((@navbar-height - @line-height-computed) / 2)" data-var="@navbar-padding-vertical" class="form-control"/>
  </div>
</div>
<h2 id="navmenu">Navmenu</h2>
<p></p>
<div class="row">
  <div class="bs-customizer-input">
    <label for="input-@navmenu-width">@navmenu-width</label>
    <input id="input-@navmenu-width" type="text" value="300px" data-var="@navmenu-width" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-margin-vertical">@navmenu-margin-vertical</label>
    <input id="input-@navmenu-margin-vertical" type="text" value="(0.5 * @line-height-computed)" data-var="@navmenu-margin-vertical" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-color">@navmenu-default-color</label>
    <input id="input-@navmenu-default-color" type="text" value="#777" data-var="@navmenu-default-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-bg">@navmenu-default-bg</label>
    <input id="input-@navmenu-default-bg" type="text" value="#f8f8f8" data-var="@navmenu-default-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-border">@navmenu-default-border</label>
    <input id="input-@navmenu-default-border" type="text" value="darken(@navmenu-default-bg, 6.5%)" data-var="@navmenu-default-border" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-link-color">@navmenu-default-link-color</label>
    <input id="input-@navmenu-default-link-color" type="text" value="#777" data-var="@navmenu-default-link-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-link-hover-color">@navmenu-default-link-hover-color</label>
    <input id="input-@navmenu-default-link-hover-color" type="text" value="#333" data-var="@navmenu-default-link-hover-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-link-hover-bg">@navmenu-default-link-hover-bg</label>
    <input id="input-@navmenu-default-link-hover-bg" type="text" value="transparent" data-var="@navmenu-default-link-hover-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-link-active-color">@navmenu-default-link-active-color</label>
    <input id="input-@navmenu-default-link-active-color" type="text" value="#555" data-var="@navmenu-default-link-active-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-link-active-bg">@navmenu-default-link-active-bg</label>
    <input id="input-@navmenu-default-link-active-bg" type="text" value="darken(@navmenu-default-bg, 6.5%)" data-var="@navmenu-default-link-active-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-link-disabled-color">@navmenu-default-link-disabled-color</label>
    <input id="input-@navmenu-default-link-disabled-color" type="text" value="#ccc" data-var="@navmenu-default-link-disabled-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-link-disabled-bg">@navmenu-default-link-disabled-bg</label>
    <input id="input-@navmenu-default-link-disabled-bg" type="text" value="transparent" data-var="@navmenu-default-link-disabled-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-brand-color">@navmenu-default-brand-color</label>
    <input id="input-@navmenu-default-brand-color" type="text" value="@navmenu-default-link-color" data-var="@navmenu-default-brand-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-brand-hover-color">@navmenu-default-brand-hover-color</label>
    <input id="input-@navmenu-default-brand-hover-color" type="text" value="darken(@navmenu-default-link-color, 10%)" data-var="@navmenu-default-brand-hover-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-default-brand-hover-bg">@navmenu-default-brand-hover-bg</label>
    <input id="input-@navmenu-default-brand-hover-bg" type="text" value="transparent" data-var="@navmenu-default-brand-hover-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-color">@navmenu-inverse-color</label>
    <input id="input-@navmenu-inverse-color" type="text" value="@gray-light" data-var="@navmenu-inverse-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-bg">@navmenu-inverse-bg</label>
    <input id="input-@navmenu-inverse-bg" type="text" value="#222" data-var="@navmenu-inverse-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-border">@navmenu-inverse-border</label>
    <input id="input-@navmenu-inverse-border" type="text" value="darken(@navmenu-inverse-bg, 10%)" data-var="@navmenu-inverse-border" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-link-color">@navmenu-inverse-link-color</label>
    <input id="input-@navmenu-inverse-link-color" type="text" value="@gray-light" data-var="@navmenu-inverse-link-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-link-hover-color">@navmenu-inverse-link-hover-color</label>
    <input id="input-@navmenu-inverse-link-hover-color" type="text" value="#fff" data-var="@navmenu-inverse-link-hover-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-link-hover-bg">@navmenu-inverse-link-hover-bg</label>
    <input id="input-@navmenu-inverse-link-hover-bg" type="text" value="transparent" data-var="@navmenu-inverse-link-hover-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-link-active-color">@navmenu-inverse-link-active-color</label>
    <input id="input-@navmenu-inverse-link-active-color" type="text" value="@navmenu-inverse-link-hover-color" data-var="@navmenu-inverse-link-active-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-link-active-bg">@navmenu-inverse-link-active-bg</label>
    <input id="input-@navmenu-inverse-link-active-bg" type="text" value="darken(@navmenu-inverse-bg, 10%)" data-var="@navmenu-inverse-link-active-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-link-disabled-color">@navmenu-inverse-link-disabled-color</label>
    <input id="input-@navmenu-inverse-link-disabled-color" type="text" value="#444" data-var="@navmenu-inverse-link-disabled-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-link-disabled-bg">@navmenu-inverse-link-disabled-bg</label>
    <input id="input-@navmenu-inverse-link-disabled-bg" type="text" value="transparent" data-var="@navmenu-inverse-link-disabled-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-brand-color">@navmenu-inverse-brand-color</label>
    <input id="input-@navmenu-inverse-brand-color" type="text" value="@navmenu-inverse-link-color" data-var="@navmenu-inverse-brand-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-brand-hover-color">@navmenu-inverse-brand-hover-color</label>
    <input id="input-@navmenu-inverse-brand-hover-color" type="text" value="#fff" data-var="@navmenu-inverse-brand-hover-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-brand-hover-bg">@navmenu-inverse-brand-hover-bg</label>
    <input id="input-@navmenu-inverse-brand-hover-bg" type="text" value="transparent" data-var="@navmenu-inverse-brand-hover-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-search-bg">@navmenu-inverse-search-bg</label>
    <input id="input-@navmenu-inverse-search-bg" type="text" value="lighten(@navmenu-inverse-bg, 25%)" data-var="@navmenu-inverse-search-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-search-bg-focus">@navmenu-inverse-search-bg-focus</label>
    <input id="input-@navmenu-inverse-search-bg-focus" type="text" value="#fff" data-var="@navmenu-inverse-search-bg-focus" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-search-border">@navmenu-inverse-search-border</label>
    <input id="input-@navmenu-inverse-search-border" type="text" value="@navmenu-inverse-bg" data-var="@navmenu-inverse-search-border" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@navmenu-inverse-search-placeholder-color">@navmenu-inverse-search-placeholder-color</label>
    <input id="input-@navmenu-inverse-search-placeholder-color" type="text" value="#ccc" data-var="@navmenu-inverse-search-placeholder-color" class="form-control"/>
  </div>
</div>
<h2 id="navs">Navs</h2>
<p></p>
<div class="row">
  <div class="bs-customizer-input">
    <label for="input-@nav-link-padding">@nav-link-padding</label>
    <input id="input-@nav-link-padding" type="text" value="10px 15px" data-var="@nav-link-padding" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@nav-tabs-active-link-hover-border-color">@nav-tabs-active-link-hover-border-color</label>
    <input id="input-@nav-tabs-active-link-hover-border-color" type="text" value="#ddd" data-var="@nav-tabs-active-link-hover-border-color" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@nav-tabs-border-color">@nav-tabs-border-color</label>
    <input id="input-@nav-tabs-border-color" type="text" value="#ddd" data-var="@nav-tabs-border-color" class="form-control"/>
  </div>
</div>
<h2 id="form-states-and-alerts">Form states and alerts</h2>
<p>Define colors for form feedback states and, by default, alerts.</p>
<div class="row">
  <div class="bs-customizer-input">
    <label for="input-@state-success-text">@state-success-text</label>
    <input id="input-@state-success-text" type="text" value="#3c763d" data-var="@state-success-text" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-success-bg">@state-success-bg</label>
    <input id="input-@state-success-bg" type="text" value="#dff0d8" data-var="@state-success-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-success-border">@state-success-border</label>
    <input id="input-@state-success-border" type="text" value="darken(spin(@state-success-bg, -10), 5%)" data-var="@state-success-border" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-info-text">@state-info-text</label>
    <input id="input-@state-info-text" type="text" value="#31708f" data-var="@state-info-text" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-info-bg">@state-info-bg</label>
    <input id="input-@state-info-bg" type="text" value="#d9edf7" data-var="@state-info-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-info-border">@state-info-border</label>
    <input id="input-@state-info-border" type="text" value="darken(spin(@state-info-bg, -10), 7%)" data-var="@state-info-border" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-warning-text">@state-warning-text</label>
    <input id="input-@state-warning-text" type="text" value="#8a6d3b" data-var="@state-warning-text" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-warning-bg">@state-warning-bg</label>
    <input id="input-@state-warning-bg" type="text" value="#fcf8e3" data-var="@state-warning-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-warning-border">@state-warning-border</label>
    <input id="input-@state-warning-border" type="text" value="darken(spin(@state-warning-bg, -10), 5%)" data-var="@state-warning-border" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-danger-text">@state-danger-text</label>
    <input id="input-@state-danger-text" type="text" value="#a94442" data-var="@state-danger-text" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-danger-bg">@state-danger-bg</label>
    <input id="input-@state-danger-bg" type="text" value="#f2dede" data-var="@state-danger-bg" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@state-danger-border">@state-danger-border</label>
    <input id="input-@state-danger-border" type="text" value="darken(spin(@state-danger-bg, -10), 5%)" data-var="@state-danger-border" class="form-control"/>
  </div>
</div>
<h2 id="alerts">Alerts</h2>
<p>Define alert colors, border radius, and padding.</p>
<div class="row">
  <div class="bs-customizer-input">
    <label for="input-@alert-border-radius">@alert-border-radius</label>
    <input id="input-@alert-border-radius" type="text" value="@border-radius-base" data-var="@alert-border-radius" class="form-control"/>
  </div>
  <div class="bs-customizer-input">
    <label for="input-@alert-fixed-width">@alert-fixed-width</label>
    <input id="input-@alert-fixed-width" type="text" value="@screen-md" data-var="@alert-fixed-width" class="form-control"/>
  </div>
</div>
<!-- NOTE: DO NOT EDIT THE PRECEDING SECTION DIRECTLY! It is autogenerated via the `build-customizer-html` Grunt task using the customizer-variables.jade template.-->