git.roojs.org Git - bootswatch/blob - bower_components/bootstrap/customize.html

   1 ---
   2 layout: customize
   3 title: Customize and download
   4 slug: customize
   5 lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
   6 base_url: "../"
   7 ---
   8
   9 <!-- Customize
  10 ================================================== -->
  11 <form class="bs-customizer">
  12   <div class="bs-docs-section">
  13     <div class="page-header">
  14       <button class="btn btn-default toggle" type="button">Toggle all</button>
  15       <h1 id="less">LESS files</h1>
  16     </div>
  17     <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>
  18
  19     <h3>Basics</h3>
  20     <div class="row">
  21       <div class="col-lg-4">
  22         <h4>Layout</h4>
  23         <div class="checkbox">
  24           <label>
  25             <input type="checkbox" checked value="normalize.less">
  26             Normalize (CSS reset)
  27           </label>
  28         </div>
  29         <div class="checkbox">
  30           <label>
  31             <input type="checkbox" checked value="scaffolding.less">
  32             Scaffolding
  33           </label>
  34         </div>
  35         <div class="checkbox">
  36           <label>
  37             <input type="checkbox" checked value="grid.less">
  38             Grid system
  39           </label>
  40         </div>
  41         <div class="checkbox">
  42           <label>
  43             <input type="checkbox" checked value="print.less">
  44             Print media styles
  45           </label>
  46         </div>
  47       </div>
  48       <div class="col-lg-4">
  49         <h4>Global CSS</h4>
  50         <div class="checkbox">
  51           <label>
  52             <input type="checkbox" checked value="type.less">
  53             Typography
  54           </label>
  55         </div>
  56         <div class="checkbox">
  57           <label>
  58             <input type="checkbox" checked value="code.less">
  59             Code
  60           </label>
  61         </div>
  62         <div class="checkbox">
  63           <label>
  64             <input type="checkbox" checked value="tables.less">
  65             Tables
  66           </label>
  67         </div>
  68         <div class="checkbox">
  69           <label>
  70             <input type="checkbox" checked value="forms.less">
  71             Forms
  72           </label>
  73         </div>
  74         <div class="checkbox">
  75           <label>
  76             <input type="checkbox" checked value="buttons.less">
  77             Buttons
  78           </label>
  79         </div>
  80       </div>
  81       <div class="col-lg-4">
  82         <h4>Utility classes</h4>
  83         <div class="checkbox">
  84           <label>
  85             <input type="checkbox" checked value="utilities.less">
  86             Basic utilities
  87           </label>
  88         </div>
  89         <div class="checkbox">
  90           <label>
  91             <input type="checkbox" checked value="responsive-utilities.less">
  92             Responsive utilities
  93           </label>
  94         </div>
  95         <div class="checkbox">
  96           <label>
  97             <input type="checkbox" checked value="component-animations.less">
  98             Component animations (for JS)
  99           </label>
 100         </div>
 101       </div>
 102     </div>
 103
 104     <h3>Components</h3>
 105     <div class="row">
 106       <div class="col-lg-4">
 107         <h4>Navigation</h4>
 108         <div class="checkbox">
 109           <label>
 110             <input type="checkbox" checked value="navs.less">
 111             Navs
 112           </label>
 113         </div>
 114         <div class="checkbox">
 115           <label>
 116             <input type="checkbox" checked value="navbar.less">
 117             Navbar
 118           </label>
 119         </div>
 120         <div class="checkbox">
 121           <label>
 122             <input type="checkbox" checked value="pagination.less">
 123             Pagination
 124           </label>
 125         </div>
 126         <div class="checkbox">
 127           <label>
 128             <input type="checkbox" checked value="pager.less">
 129             Pager
 130           </label>
 131         </div>
 132         <div class="checkbox">
 133           <label>
 134             <input type="checkbox" checked value="breadcrumbs.less">
 135             Breadcrumbs
 136           </label>
 137         </div>
 138       </div>
 139       <div class="col-lg-4">
 140         <h4>Content blocks</h4>
 141         <div class="checkbox">
 142           <label>
 143             <input type="checkbox" checked value="jumbotron.less">
 144             Jumbotron
 145           </label>
 146         </div>
 147         <div class="checkbox">
 148           <label>
 149             <input type="checkbox" checked value="accordion.less">
 150             Accordion
 151           </label>
 152         </div>
 153         <div class="checkbox">
 154           <label>
 155             <input type="checkbox" checked value="panels.less">
 156             Panels
 157           </label>
 158         </div>
 159         <div class="checkbox">
 160           <label>
 161             <input type="checkbox" checked value="wells.less">
 162             Wells
 163           </label>
 164         </div>
 165       </div>
 166       <div class="col-lg-4">
 167         <h4>Behavioral (requires JS)</h4>
 168         <div class="checkbox">
 169           <label>
 170             <input type="checkbox" checked value="alerts.less">
 171             Alerts
 172           </label>
 173         </div>
 174         <div class="checkbox">
 175           <label>
 176             <input type="checkbox" checked value="dropdowns.less">
 177             Dropdowns
 178           </label>
 179         </div>
 180         <div class="checkbox">
 181           <label>
 182             <input type="checkbox" checked value="tooltip.less">
 183             Tooltips
 184           </label>
 185         </div>
 186         <div class="checkbox">
 187           <label>
 188             <input type="checkbox" checked value="popovers.less">
 189             Popovers
 190           </label>
 191         </div>
 192         <div class="checkbox">
 193           <label>
 194             <input type="checkbox" checked value="modals.less">
 195             Modals
 196           </label>
 197         </div>
 198         <div class="checkbox">
 199           <label>
 200             <input type="checkbox" checked value="carousel.less">
 201             Carousel
 202           </label>
 203         </div>
 204       </div>
 205     </div>
 206
 207     <div class="row">
 208       <div class="col-lg-4">
 209         <h4>Media</h4>
 210         <div class="checkbox">
 211           <label>
 212             <input type="checkbox" checked value="thumbnails.less">
 213             Thumbnails
 214           </label>
 215         </div>
 216         <div class="checkbox">
 217           <label>
 218             <input type="checkbox" checked value="list-group.less">
 219             List groups
 220           </label>
 221         </div>
 222         <div class="checkbox">
 223           <label>
 224             <input type="checkbox" checked value="media.less">
 225             Media items
 226           </label>
 227         </div>
 228       </div>
 229       <div class="col-lg-4">
 230         <h4>Miscellaneous</h4>
 231         <div class="checkbox">
 232           <label>
 233             <input type="checkbox" checked value="button-groups.less">
 234             Button groups
 235           </label>
 236         </div>
 237         <div class="checkbox">
 238           <label>
 239             <input type="checkbox" checked value="progress-bars.less">
 240             Progress bars
 241           </label>
 242         </div>
 243         <div class="checkbox">
 244           <label>
 245             <input type="checkbox" checked value="badges.less">
 246             Badges
 247           </label>
 248         </div>
 249         <div class="checkbox">
 250           <label>
 251             <input type="checkbox" checked value="labels.less">
 252             Labels
 253           </label>
 254         </div>
 255         <div class="checkbox">
 256           <label>
 257             <input type="checkbox" checked value="close.less">
 258             Close icon
 259           </label>
 260         </div>
 261       </div>
 262     </div>
 263   </div>
 264
 265
 266
 267   <div class="bs-docs-section">
 268     <div class="page-header">
 269       <button class="btn btn-default toggle" type="button">Toggle all</button>
 270       <h1 id="plugins">jQuery plugins</h1>
 271     </div>
 272     <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>
 273     <div class="row">
 274       <div class="col-lg-6">
 275         <h4>Linked to components</h4>
 276         <div class="checkbox">
 277           <label>
 278             <input type="checkbox" checked value="alert.js">
 279             Alert dismissal
 280           </label>
 281         </div>
 282         <div class="checkbox">
 283           <label>
 284             <input type="checkbox" checked value="button.js">
 285             Advanced buttons
 286           </label>
 287         </div>
 288         <div class="checkbox">
 289           <label>
 290             <input type="checkbox" checked value="carousel.js">
 291             Carousel functionality
 292           </label>
 293         </div>
 294         <div class="checkbox">
 295           <label>
 296             <input type="checkbox" checked value="dropdown.js">
 297             Dropdowns
 298           </label>
 299         </div>
 300         <div class="checkbox">
 301           <label>
 302             <input type="checkbox" checked value="modal.js">
 303             Modals
 304           </label>
 305         </div>
 306         <div class="checkbox">
 307           <label>
 308             <input type="checkbox" checked value="tooltip.js">
 309             Tooltips
 310           </label>
 311         </div>
 312         <div class="checkbox">
 313           <label>
 314             <input type="checkbox" checked value="popover.js">
 315             Popovers <small>(requires Tooltips)</small>
 316           </label>
 317         </div>
 318         <div class="checkbox">
 319           <label>
 320             <input type="checkbox" checked value="tab.js">
 321             Toggable tabs
 322           </label>
 323         </div>
 324       </div>
 325       <div class="col-lg-6">
 326         <h4>Magic</h4>
 327         <div class="checkbox">
 328           <label>
 329             <input type="checkbox" checked value="affix.js">
 330             Affix
 331           </label>
 332         </div>
 333         <div class="checkbox">
 334           <label>
 335             <input type="checkbox" checked value="collapse.js">
 336             Collapse
 337           </label>
 338         </div>
 339         <div class="checkbox">
 340           <label>
 341             <input type="checkbox" checked value="scrollspy.js">
 342             Scrollspy
 343           </label>
 344         </div>
 345         <div class="checkbox">
 346           <label>
 347             <input type="checkbox" checked value="transition.js">
 348             Transitions <small>(required for any kind of animation)</small>
 349           </label>
 350         </div>
 351       </div>
 352     </div>
 353
 354     <div class="bs-callout bs-callout-info">
 355       <h4>Produces two files</h4>
 356       <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>
 357     </div>
 358
 359     <div class="bs-callout bs-callout-danger">
 360       <h4>jQuery required</h4>
 361       <p>All plugins require the latest version of <a href="http://jquery.com/" target="_blank">jQuery</a> to be included.</p>
 362     </div>
 363   </div>
 364
 365
 366
 367   <div class="bs-docs-section">
 368     <div class="page-header">
 369       <button class="btn btn-default toggle" type="button">Reset to defaults</button>
 370       <h1 id="less-variables">LESS variables</h1>
 371     </div>
 372     <p class="lead">Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.</p>
 373
 374     <h2 id="variables-basics">Basics</h2>
 375
 376     <h3>Body background</h3>
 377     <div class="row">
 378       <div class="col-lg-6">
 379         <label>@body-bg</label>
 380         <input type="text" class="form-control" placeholder="#fff">
 381         <p class="help-block">Background color applied to <code>&lt;body&gt;</code>.</p>
 382       </div>
 383     </div>
 384
 385     <h3>Typography</h3>
 386     <div class="row">
 387       <div class="col-lg-6">
 388         <label>@font-family-sans-serif</label>
 389         <input type="text" class="form-control" placeholder="'Helvetica Neue', Helvetica, Arial, sans-serif">
 390         <p class="help-block">Default sans-serif fonts.</p>
 391         <label>@font-family-serif</label>
 392         <input type="text" class="form-control" placeholder="Georgia, 'Times New Roman', Times, serif">
 393         <p class="help-block">Default serif fonts.</p>
 394         <label>@font-family-monospace</label>
 395         <input type="text" class="form-control" placeholder="Monaco, Menlo, Consolas, 'Courier New', monospace">
 396         <p class="help-block">Default monospace fonts for <code>&lt;code&gt;</code> and <code>&lt;pre&gt;</code>.</p>
 397       </div>
 398       <div class="col-lg-6">
 399         <label>@font-family-base</label>
 400         <input type="text" class="form-control" placeholder="@font-family-sans-serif">
 401         <p class="help-block">Used to globally set font-family in Bootstrap.</p>
 402         <label>@font-size-base</label>
 403         <input type="text" class="form-control" placeholder="14px">
 404         <p class="help-block">Used to calculate font-size throughout Bootstrap.</p>
 405         <label>@line-height-base</label>
 406         <input type="text" class="form-control" placeholder="1.428571429">
 407         <p class="help-block">Used to calculate line-height throughout Bootstrap.</p>
 408       </div>
 409     </div>
 410
 411     <h3>Code blocks</h3>
 412     <div class="row">
 413       <div class="col-lg-6">
 414         <label>@code-color</label>
 415         <input type="text" class="form-control" placeholder="#c7254e">
 416         <label>@code-bg</label>
 417         <input type="text" class="form-control" placeholder="#f9f2f4">
 418       </div>
 419       <div class="col-lg-6">
 420         <label>@pre-bg</label>
 421         <input type="text" class="form-control" placeholder="#f5f5f5">
 422         <label>@code-border-color</label>
 423         <input type="text" class="form-control" placeholder="#ccc">
 424       </div>
 425     </div>
 426
 427     <h4>Headings</h4>
 428     <div class="row">
 429       <div class="col-lg-6">
 430         <label>@headings-font-family</label>
 431         <input type="text" class="form-control" placeholder="@font-family-base">
 432         <p class="help-block">Choose a separate font-family for headings.</p>
 433         <label>@headings-font-weight</label>
 434         <input type="text" class="form-control" placeholder="500">
 435         <p class="help-block">Choose a separate font-weight for headings.</p>
 436       </div>
 437       <div class="col-lg-6">
 438         <label>@headings-line-height</label>
 439         <input type="text" class="form-control" placeholder="1.1">
 440         <p class="help-block">Choose a separate line-height for headings.</p>
 441       </div>
 442     </div>
 443
 444     <h3>Colors</h3>
 445     <div class="row">
 446       <div class="col-lg-6">
 447         <p>Define custom colors used in several contexts.</p>
 448         <label>@brand-primary</label>
 449         <input type="text" class="form-control" placeholder="#428bca">
 450         <p class="help-block">Used for primary buttons, panels and more.</p>
 451         <label>@brand-success</label>
 452         <input type="text" class="form-control" placeholder="#5cb85c">
 453         <p class="help-block">Used to indicate success.</p>
 454         <label>@brand-warning</label>
 455         <input type="text" class="form-control" placeholder="#f0ad4e">
 456         <p class="help-block">Used to indicate a warning.</p>
 457         <label>@brand-danger</label>
 458         <input type="text" class="form-control" placeholder="#d9534f">
 459         <p class="help-block">Used to indicate danger.</p>
 460         <label>@brand-info</label>
 461         <input type="text" class="form-control" placeholder="#5bc0de">
 462         <p class="help-block">Used to indicate informational content.</p>
 463       </div>
 464       <div class="col-lg-6">
 465         <p>Define your preferred colors for standard text and links.</p>
 466         <label>@text-color</label>
 467         <input type="text" class="form-control" placeholder="@gray-dark">
 468         <p class="help-block">Global color set on the body.</p>
 469         <label>@link-color</label>
 470         <input type="text" class="form-control" placeholder="@brand-primary">
 471         <p class="help-block">Global link color for text.</p>
 472         <label>@link-color-hover</label>
 473         <input type="text" class="form-control" placeholder="darken(@link-color, 15%)">
 474         <p class="help-block">Automatically darken links on hover via color function.</p>
 475       </div>
 476     </div>
 477
 478     <h3>Media queries breakpoints</h3>
 479     <p>Define the breakpoints at which your layout will change, adapting to different screen sizes.</p>
 480     <div class="row">
 481       <div class="col-lg-6">
 482         <label>@screen-tiny</label>
 483         <input type="text" class="form-control" placeholder="480px">
 484         <label>@screen-small</label>
 485         <input type="text" class="form-control" placeholder="768px">
 486       </div>
 487       <div class="col-lg-6">
 488         <label>@screen-medium</label>
 489         <input type="text" class="form-control" placeholder="992px">
 490         <label>@screen-large</label>
 491         <input type="text" class="form-control" placeholder="1200px">
 492       </div>
 493     </div>
 494
 495     <h3>Container sizes</h3>
 496     <p>Define the maximum width of <code>.container</code> for different screen sizes.</p>
 497     <div class="row">
 498       <div class="col-lg-6">
 499         <label>@container-tablet</label>
 500         <input type="text" class="form-control" placeholder="728px">
 501         <p class="help-block">For <code>@screen-small</code> and up.</p>
 502         <label>@container-desktop</label>
 503         <input type="text" class="form-control" placeholder="940px">
 504         <p class="help-block">For <code>@screen-medium</code> and up.</p>
 505       </div>
 506       <div class="col-lg-6">
 507         <label>@container-large-desktop</label>
 508         <input type="text" class="form-control" placeholder="1170px">
 509         <p class="help-block">For <code>@screen-large</code> and up.</p>
 510       </div>
 511     </div>
 512
 513     <h3>Grid system</h3>
 514     <p>Define your custom responsive grid.</p>
 515     <div class="row">
 516       <div class="col-lg-6">
 517         <label>@grid-columns</label>
 518         <input type="text" class="form-control" placeholder="12">
 519         <p class="help-block">Number of columns in the grid.</p>
 520         <label>@grid-gutter-width</label>
 521         <input type="text" class="form-control" placeholder="30px">
 522         <p class="help-block">Padding between columns.</p>
 523       </div>
 524       <div class="col-lg-6">
 525         <label>@grid-float-breakpoint</label>
 526         <input type="text" class="form-control" placeholder="@screen-tablet">
 527         <p class="help-block">Point at which the navbar stops collapsing.</p>
 528       </div>
 529     </div>
 530
 531     <h3>Components</h3>
 532     <p>Define common padding and border radius sizes and more.</p>
 533     <div class="row">
 534       <div class="col-lg-6">
 535         <h4>Padding</h4>
 536         <label>@padding-base-vertical</label>
 537         <input type="text" class="form-control" placeholder="8px">
 538         <label>@padding-base-horizontal</label>
 539         <input type="text" class="form-control" placeholder="12px">
 540         <label>@padding-large-vertical</label>
 541         <input type="text" class="form-control" placeholder="14px">
 542         <label>@padding-large-horizontal</label>
 543         <input type="text" class="form-control" placeholder="16px">
 544         <label>@padding-small-vertical</label>
 545         <input type="text" class="form-control" placeholder="5px">
 546         <label>@padding-small-horizontal</label>
 547         <input type="text" class="form-control" placeholder="10px">
 548       </div>
 549       <div class="col-lg-6">
 550         <h4>Border radius sizes</h4>
 551         <label>@border-radius-base</label>
 552         <input type="text" class="form-control" placeholder="4px">
 553         <label>@border-radius-large</label>
 554         <input type="text" class="form-control" placeholder="6px">
 555         <label>@border-radius-small</label>
 556         <input type="text" class="form-control" placeholder="3px">
 557         <h4>Active background color</h4>
 558         <label>@component-active-bg</label>
 559         <input type="text" class="form-control" placeholder="@brand-primary">
 560         <p class="help-block">Used for active or hovered items in places like navs or dropdowns.</p>
 561       </div>
 562     </div>
 563
 564     <h2 id="variables-buttons">Buttons</h2>
 565     <p>For each of Bootstrap's buttons, define text, background and border color.</p>
 566     <div class="row">
 567       <div class="col-lg-6">
 568         <h4>Default</h4>
 569         <label>@btn-default-color</label>
 570         <input type="text" class="form-control" placeholder="#fff">
 571         <label>@btn-default-bg</label>
 572         <input type="text" class="form-control" placeholder="#474949">
 573         <label>@btn-default-border</label>
 574         <input type="text" class="form-control" placeholder="@btn-default-bg">
 575         <h4>Primary</h4>
 576         <label>@btn-primary-color</label>
 577         <input type="text" class="form-control" placeholder="@btn-default-color">
 578         <label>@btn-primary-bg</label>
 579         <input type="text" class="form-control" placeholder="@brand-primary">
 580         <label>@btn-primary-border</label>
 581         <input type="text" class="form-control" placeholder="@btn-primary-bg">
 582         <h4>Info</h4>
 583         <label>@btn-info-color</label>
 584         <input type="text" class="form-control" placeholder="@btn-default-color">
 585         <label>@btn-info-bg</label>
 586         <input type="text" class="form-control" placeholder="@brand-info">
 587         <label>@btn-info-border</label>
 588         <input type="text" class="form-control" placeholder="@btn-info-bg">
 589         <h4>Button hover</h4>
 590         <label>@btn-hover-color</label>
 591         <input type="text" class="form-control" placeholder="@btn-default-color">
 592       </div>
 593       <div class="col-lg-6">
 594         <h4>Success</h4>
 595         <label>@btn-success-color</label>
 596         <input type="text" class="form-control" placeholder="@btn-default-color">
 597         <label>@btn-success-bg</label>
 598         <input type="text" class="form-control" placeholder="@brand-success">
 599         <label>@btn-success-border</label>
 600         <input type="text" class="form-control" placeholder="@btn-success-bg">
 601         <h4>Warning</h4>
 602         <label>@btn-warning-color</label>
 603         <input type="text" class="form-control" placeholder="@btn-default-color">
 604         <label>@btn-warning-bg</label>
 605         <input type="text" class="form-control" placeholder="@brand-warning">
 606         <label>@btn-warning-border</label>
 607         <input type="text" class="form-control" placeholder="@btn-warning-bg">
 608         <h4>Danger</h4>
 609         <label>@btn-danger-color</label>
 610         <input type="text" class="form-control" placeholder="@btn-default-color">
 611         <label>@btn-danger-bg</label>
 612         <input type="text" class="form-control" placeholder="@brand-danger">
 613         <label>@btn-danger-border</label>
 614         <input type="text" class="form-control" placeholder="@btn-danger-bg">
 615       </div>
 616     </div>
 617
 618     <h2 id="variables-form-states">Form states and alerts</h2>
 619     <p>Define colors for form feedback states and, by default, alerts.</p>
 620     <div class="row">
 621       <div class="col-lg-6">
 622         <h4>Success</h4>
 623         <label>@state-success-text</label>
 624         <input type="text" class="form-control" placeholder="#468847">
 625         <label>@state-success-bg</label>
 626         <input type="text" class="form-control" placeholder="#dff0d8">
 627         <label>@state-success-border</label>
 628         <input type="text" class="form-control" placeholder="darken(spin(@state-success-bg, -10), 5%)">
 629         <h4>Warning</h4>
 630         <label>@state-warning-text</label>
 631         <input type="text" class="form-control" placeholder="#c09853">
 632         <label>@state-warning-bg</label>
 633         <input type="text" class="form-control" placeholder="#fcf8e3">
 634         <label>@state-warning-border</label>
 635         <input type="text" class="form-control" placeholder="darken(spin(@state-warning-bg, -10), 3%)">
 636       </div>
 637       <div class="col-lg-6">
 638         <h4>Danger</h4>
 639         <label>@state-danger-text</label>
 640         <input type="text" class="form-control" placeholder="#b94a48">
 641         <label>@state-danger-bg</label>
 642         <input type="text" class="form-control" placeholder="#f2dede">
 643         <label>@state-danger-border</label>
 644         <input type="text" class="form-control" placeholder="darken(spin(@state-danger-bg, -10), 3%)">
 645         <h4>Info</h4>
 646         <label>@state-info-text</label>
 647         <input type="text" class="form-control" placeholder="#3a87ad">
 648         <label>@state-info-bg</label>
 649         <input type="text" class="form-control" placeholder="#d9edf7">
 650         <label>@state-info-border</label>
 651         <input type="text" class="form-control" placeholder="darken(spin(@state-info-bg, -10), 7%)">
 652       </div>
 653     </div>
 654
 655     <h2 id="variables-alerts">Alerts</h2>
 656     <p>Define alert colors and border radius.</p>
 657     <h4>Border radius</h4>
 658     <label>@alert-border-radius</label>
 659     <input type="text" class="form-control" placeholder="@border-radius-base">
 660     <div class="row">
 661       <div class="col-lg-6">
 662         <h4>Success</h4>
 663         <label>@alert-success-text</label>
 664         <input type="text" class="form-control" placeholder="@state-success-text">
 665         <label>@alert-success-bg</label>
 666         <input type="text" class="form-control" placeholder="@state-success-bg">
 667         <label>@alert-success-border</label>
 668         <input type="text" class="form-control" placeholder="@state-success-border">
 669         <h4>Warning</h4>
 670         <label>@alert-warning-text</label>
 671         <input type="text" class="form-control" placeholder="@state-warning-text">
 672         <label>@alert-warning-bg</label>
 673         <input type="text" class="form-control" placeholder="@state-warning-bg">
 674         <label>@alert-warning-border</label>
 675         <input type="text" class="form-control" placeholder="@state-warning-border">
 676       </div>
 677       <div class="col-lg-6">
 678         <h4>Danger</h4>
 679         <label>@alert-danger-text</label>
 680         <input type="text" class="form-control" placeholder="@state-danger-text">
 681         <label>@alert-danger-bg</label>
 682         <input type="text" class="form-control" placeholder="@state-danger-bg">
 683         <label>@alert-danger-border</label>
 684         <input type="text" class="form-control" placeholder="@state-danger-border">
 685         <h4>Info</h4>
 686         <label>@alert-info-text</label>
 687         <input type="text" class="form-control" placeholder="@state-info-text">
 688         <label>@alert-info-bg</label>
 689         <input type="text" class="form-control" placeholder="@state-info-bg">
 690         <label>@alert-info-border</label>
 691         <input type="text" class="form-control" placeholder="@state-info-border">
 692       </div>
 693     </div>
 694
 695     <h2 id="variables-navbar">Navbar</h2>
 696     <div class="row">
 697       <div class="col-lg-6">
 698         <h3>Default navbar</h3>
 699         <h4>Basics</h4>
 700         <label>@navbar-height</label>
 701         <input type="text" class="form-control" placeholder="50px">
 702         <label>@navbar-color</label>
 703         <input type="text" class="form-control" placeholder="#777">
 704         <label>@navbar-bg</label>
 705         <input type="text" class="form-control" placeholder="#eee">
 706         <h4>Links</h4>
 707         <label>@navbar-link-color</label>
 708         <input type="text" class="form-control" placeholder="#777">
 709         <label>@navbar-link-hover-color</label>
 710         <input type="text" class="form-control" placeholder="#333">
 711         <label>@navbar-link-hover-bg</label>
 712         <input type="text" class="form-control" placeholder="transparent">
 713         <label>@navbar-link-active-color</label>
 714         <input type="text" class="form-control" placeholder="#555">
 715         <label>@navbar-link-active-bg</label>
 716         <input type="text" class="form-control" placeholder="darken(@navbar-bg, 10%)">
 717         <label>@navbar-link-disabled-color</label>
 718         <input type="text" class="form-control" placeholder="#ccc">
 719         <label>@navbar-link-disabled-bg</label>
 720         <input type="text" class="form-control" placeholder="transparent">
 721         <h4>Brand</h4>
 722         <label>@navbar-brand-color</label>
 723         <input type="text" class="form-control" placeholder="@navbar-link-color">
 724         <label>@navbar-brand-hover-color</label>
 725         <input type="text" class="form-control" placeholder="darken(@navbar-link-color, 10%)">
 726         <label>@navbar-brand-hover-bg</label>
 727         <input type="text" class="form-control" placeholder="transparent">
 728         <h4>Toggle</h4>
 729         <label>@navbar-toggle-hover-bg</label>
 730         <input type="text" class="form-control" placeholder="#ddd">
 731         <label>@navbar-toggle-icon-bar-bg</label>
 732         <input type="text" class="form-control" placeholder="#ccc">
 733         <label>@navbar-toggle-border-color</label>
 734         <input type="text" class="form-control" placeholder="#ddd">
 735       </div>
 736       <div class="col-lg-6">
 737         <h3>Inverted navbar</h3>
 738         <h4>Basics</h4>
 739         <label>@navbar-inverse-color</label>
 740         <input type="text" class="form-control" placeholder="@gray-light">
 741         <label>@navbar-inverse-bg</label>
 742         <input type="text" class="form-control" placeholder="#222">
 743         <h4>Links</h4>
 744         <label>@navbar-inverse-link-color</label>
 745         <input type="text" class="form-control" placeholder="@gray-light">
 746         <label>@navbar-inverse-link-hover-color</label>
 747         <input type="text" class="form-control" placeholder="#fff">
 748         <label>@navbar-inverse-link-hover-bg</label>
 749         <input type="text" class="form-control" placeholder="transparent">
 750         <label>@navbar-inverse-link-active-color</label>
 751         <input type="text" class="form-control" placeholder="@navbar-inverse-link-hover-color">
 752         <label>@navbar-inverse-link-active-bg</label>
 753         <input type="text" class="form-control" placeholder="darken(@navbar-inverse-bg, 10%)">
 754         <label>@navbar-inverse-link-disabled-color</label>
 755         <input type="text" class="form-control" placeholder="#444">
 756         <label>@navbar-inverse-link-disabled-bg</label>
 757         <input type="text" class="form-control" placeholder="transparent">
 758         <h4>Brand</h4>
 759         <label>@navbar-inverse-brand-color</label>
 760         <input type="text" class="form-control" placeholder="@navbar-inverse-link-color">
 761         <label>@navbar-inverse-brand-hover-color</label>
 762         <input type="text" class="form-control" placeholder="#fff">
 763         <label>@navbar-inverse-brand-hover-bg</label>
 764         <input type="text" class="form-control" placeholder="transparent">
 765         <h4>Toggle</h4>
 766         <label>@navbar-inverse-toggle-hover-bg</label>
 767         <input type="text" class="form-control" placeholder="#333">
 768         <label>@navbar-inverse-toggle-icon-bar-bg</label>
 769         <input type="text" class="form-control" placeholder="#fff">
 770         <label>@navbar-inverse-toggle-border-color</label>
 771         <input type="text" class="form-control" placeholder="#333">
 772       </div>
 773     </div>
 774
 775
 776     <h2 id="variables-nav">Nav</h2>
 777
 778     <h3>Default nav</h3>
 779     <div class="row">
 780       <div class="col-lg-6">
 781         <h4>Common values</h4>
 782         <label>@nav-link-hover-bg</label>
 783         <input type="text" class="form-control" placeholder="@gray-lighter">
 784         <label>@nav-disabled-link-color</label>
 785         <input type="text" class="form-control" placeholder="@gray-light">
 786         <label>@nav-disabled-link-hover-color</label>
 787         <input type="text" class="form-control" placeholder="@gray-light">
 788         <label>@nav-open-link-hover-color</label>
 789         <input type="text" class="form-control" placeholder="#fff">
 790         <label>@nav-open-caret-border-color</label>
 791         <input type="text" class="form-control" placeholder="@fff">
 792
 793         <h4>Pills</h4>
 794         <label>@nav-pills-active-link-hover-color</label>
 795         <input type="text" class="form-control" placeholder="@fff">
 796         <label>@nav-pills-active-link-hover-bg</label>
 797         <input type="text" class="form-control" placeholder="@component-active-bg">
 798       </div>
 799       <div class="col-lg-6">
 800         <h4>Tabs</h4>
 801         <label>@nav-tabs-border-color</label>
 802         <input type="text" class="form-control" placeholder="@ddd">
 803         <label>@nav-tabs-link-hover-border-color</label>
 804         <input type="text" class="form-control" placeholder="@gray-lighter">
 805         <label>@nav-tabs-active-link-hover-color</label>
 806         <input type="text" class="form-control" placeholder="@gray">
 807         <label>@nav-tabs-active-link-hover-bg</label>
 808         <input type="text" class="form-control" placeholder="@body-bg">
 809         <label>@nav-tabs-active-link-hover-border-color</label>
 810         <input type="text" class="form-control" placeholder="#ddd">
 811         <label>@nav-tabs-justified-link-border-color</label>
 812         <input type="text" class="form-control" placeholder="#ddd">
 813         <label>@nav-tabs-justified-active-link-border-color</label>
 814         <input type="text" class="form-control" placeholder="@body-bg">
 815       </div>
 816     </div>
 817
 818
 819     <h2 id="variables-tables">Tables</h2>
 820     <div class="row">
 821       <div class="col-lg-6">
 822         <label>@table-bg</label>
 823         <input type="text" class="form-control" placeholder="transparent">
 824         <p class="help-block">Default background color used for all tables.</p>
 825         <label>@table-bg-accent</label>
 826         <input type="text" class="form-control" placeholder="#f9f9f9">
 827         <p class="help-block">Background color used for <code>.table-striped</code>.</p>
 828       </div>
 829       <div class="col-lg-6">
 830         <label>@table-bg-hover</label>
 831         <input type="text" class="form-control" placeholder="#f5f5f5">
 832         <p class="help-block">Background color used for <code>.table-hover</code>.</p>
 833         <label>@table-border-color</label>
 834         <input type="text" class="form-control" placeholder="#ddd">
 835         <p class="help-block">Border color for table and cell borders.</p>
 836       </div>
 837     </div>
 838
 839     <h2 id="variables-forms">Forms</h2>
 840     <div class="row">
 841       <div class="col-lg-6">
 842         <h3>Inputs</h3>
 843         <label>@input-bg</label>
 844         <input type="text" class="form-control" placeholder="#fff">
 845         <p class="help-block"><code>&lt;input&gt;</code> background color</p>
 846         <label>@input-border</label>
 847         <input type="text" class="form-control" placeholder="#ccc">
 848         <p class="help-block"><code>&lt;input&gt;</code> border color</p>
 849         <label>@input-border-radius</label>
 850         <input type="text" class="form-control" placeholder="@border-radius-base">
 851         <p class="help-block"><code>&lt;input&gt;</code> border radius</p>
 852         <label>@input-bg-disabled</label>
 853         <input type="text" class="form-control" placeholder="@gray-lighter">
 854         <p class="help-block"><code>&lt;input disabled&gt;</code> background color</p>
 855       </div>
 856       <div class="col-lg-6">
 857         <h3>Placeholder</h3>
 858         <label>@input-color-placeholder</label>
 859         <input type="text" class="form-control" placeholder="@gray-light">
 860         <p class="help-block">Placeholder text color</p>
 861
 862         <h3>Legend</h3>
 863         <label>@legend-border-color</label>
 864         <input type="text" class="form-control" placeholder="#e5e5e5">
 865         <p class="help-block"><code>&lt;legend&gt;</code> border color</p>
 866
 867         <h3>Input groups</h3>
 868         <label>@input-group-addon-border-color</label>
 869         <input type="text" class="form-control" placeholder="@input-border">
 870         <p class="help-block">Border color for textual input addons</p>
 871       </div>
 872     </div>
 873
 874     <h2 id="variables-dropdowns">Dropdowns</h2>
 875     <div class="row">
 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">
 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)">
 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">
 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">
 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">
 892         <p class="help-block">Dropdown divider top border color</p>
 893       </div>
 894       <div class="col-lg-6">
 895         <h3>Dropdown items</h3>
 896         <label>@dropdown-link-color</label>
 897         <input type="text" class="form-control" placeholder="@gray-dark">
 898         <p class="help-block">Dropdown text color</p>
 899         <label>@dropdown-link-active-color</label>
 900         <input type="text" class="form-control" placeholder="#fff">
 901         <p class="help-block">Active dropdown menu entry text color</p>
 902         <label>@dropdown-link-hover-bg</label>
 903         <input type="text" class="form-control" placeholder="#fff">
 904         <p class="help-block">Hovered dropdown menu entry text color</p>
 905         <label>@dropdown-link-active-bg</label>
 906         <input type="text" class="form-control" placeholder="@component-active-bg">
 907         <p class="help-block">Active dropdown menu entry background color</p>
 908         <label>@dropdown-link-hover-bg</label>
 909         <input type="text" class="form-control" placeholder="@dropdown-link-active-bg">
 910         <p class="help-block">Hovered dropdown menu entry background color</p>
 911       </div>
 912     </div>
 913
 914     <h2 id="variables-panels-wells">Panels and wells</h2>
 915     <h3>Default panel styles</h3>
 916     <div class="row">
 917       <div class="col-lg-6">
 918         <label>@panel-bg</label>
 919         <input type="text" class="form-control" placeholder="#fff">
 920         <p class="help-block">Panel body background color</p>
 921         <label>@panel-heading-bg</label>
 922         <input type="text" class="form-control" placeholder="#f5f5f5">
 923         <p class="help-block">Panel heading background color</p>
 924         <label>@panel-footer-bg</label>
 925         <input type="text" class="form-control" placeholder="#f5f5f5">
 926         <p class="help-block">Panel footer background color</p>
 927       </div>
 928       <div class="col-lg-6">
 929         <label>@panel-border</label>
 930         <input type="text" class="form-control" placeholder="#ddd">
 931         <p class="help-block">Panel border color</p>
 932         <label>@panel-border-radius</label>
 933         <input type="text" class="form-control" placeholder="@border-radius-base">
 934         <p class="help-block">Panel border radius</p>
 935       </div>
 936     </div>
 937     <h3>Contextual panel colors</h3>
 938     <div class="row">
 939       <div class="col-lg-6">
 940         <h4>Primary</h4>
 941         <label>@panel-primary-text</label>
 942         <input type="text" class="form-control" placeholder="#fff">
 943         <p class="help-block">Primary text color</p>
 944         <label>@panel-primary-border</label>
 945         <input type="text" class="form-control" placeholder="@brand-primary">
 946         <p class="help-block">Primary border color</p>
 947         <label>@panel-primary-heading-bg</label>
 948         <input type="text" class="form-control" placeholder="@brand-primary">
 949         <p class="help-block">Primary heading background color</p>
 950         <h4>Success</h4>
 951         <label>@panel-success-text</label>
 952         <input type="text" class="form-control" placeholder="@state-success-text">
 953         <p class="help-block">Success text color</p>
 954         <label>@panel-success-border</label>
 955         <input type="text" class="form-control" placeholder="@state-success-border">
 956         <p class="help-block">Success border color</p>
 957         <label>@panel-success-heading-bg</label>
 958         <input type="text" class="form-control" placeholder="@state-success-bg">
 959         <p class="help-block">Success heading background color</p>
 960         <h4>Info</h4>
 961         <label>@panel-info-text</label>
 962         <input type="text" class="form-control" placeholder="@state-info-text">
 963         <p class="help-block">Info text color</p>
 964         <label>@panel-info-border</label>
 965         <input type="text" class="form-control" placeholder="@state-info-border">
 966         <p class="help-block">Info border color</p>
 967         <label>@panel-info-heading-bg</label>
 968         <input type="text" class="form-control" placeholder="@state-info-bg">
 969         <p class="help-block">Info heading background color</p>
 970       </div>
 971       <div class="col-lg-6">
 972         <h4>Warning</h4>
 973         <label>@panel-warning-text</label>
 974         <input type="text" class="form-control" placeholder="@state-warning-text">
 975         <p class="help-block">Warning text color</p>
 976         <label>@panel-warning-border</label>
 977         <input type="text" class="form-control" placeholder="@state-warning-border">
 978         <p class="help-block">Warning border color</p>
 979         <label>@panel-warning-heading-bg</label>
 980         <input type="text" class="form-control" placeholder="@state-warning-bg">
 981         <p class="help-block">Warning heading background color</p>
 982         <h4>Danger</h4>
 983         <label>@panel-danger-text</label>
 984         <input type="text" class="form-control" placeholder="@state-danger-text">
 985         <p class="help-block">Danger text color</p>
 986         <label>@panel-danger-border</label>
 987         <input type="text" class="form-control" placeholder="@state-danger-border">
 988         <p class="help-block">Danger border color</p>
 989         <label>@panel-danger-heading-bg</label>
 990         <input type="text" class="form-control" placeholder="@state-danger-bg">
 991         <p class="help-block">Danger heading background color</p>
 992       </div>
 993     </div>
 994
 995     <h3>Wells</h3>
 996     <label>@well-bg</label>
 997     <input type="text" class="form-control" placeholder="#f5f5f5">
 998
 999     <h2 id="variables-accordion">Accordion</h2>
1000     <label>@accordion-border-bg</label>
1001     <input type="text" class="form-control" placeholder="#e5e5e5">
1002
1003     <h2 id="variables-badges">Badges</h2>
1004     <div class="row">
1005       <div class="col-lg-6">
1006         <label>@badge-color</label>
1007         <input type="text" class="form-control" placeholder="#fff">
1008         <p>Badge text color</p>
1009         <label>@badge-bg</label>
1010         <input type="text" class="form-control" placeholder="@gray-light">
1011         <p>Badge background color</p>
1012         <label>@badge-link-hover-color</label>
1013         <input type="text" class="form-control" placeholder="#fff">
1014         <p>Linked badge text color on hover</p>
1015       </div>
1016       <div class="col-lg-6">
1017         <label>@badge-active-color</label>
1018         <input type="text" class="form-control" placeholder="@link-color">
1019         <p>Badge text color in active nav link</p>
1020         <label>@badge-active-bg</label>
1021         <input type="text" class="form-control" placeholder="#fff">
1022         <p>Badge text color in active nav link</p>
1023       </div>
1024     </div>
1025
1026     <h2 id="variables-breadcrumbs">Breadcrumbs</h2>
1027     <div class="row">
1028       <div class="col-lg-4">
1029         <label>@breadcrumb-color</label>
1030         <input type="text" class="form-control" placeholder="#ccc">
1031         <p>Breadcrumb text color</p>
1032       </div>
1033       <div class="col-lg-4">
1034         <label>@breadcrumb-bg</label>
1035         <input type="text" class="form-control" placeholder="#f5f5f5">
1036         <p>Breadcrumb background color</p>
1037       </div>
1038       <div class="col-lg-4">
1039         <label>@breadcrumb-active-color</label>
1040         <input type="text" class="form-control" placeholder="@gray-light">
1041         <p>Text color of current page in the breadcrumb</p>
1042       </div>
1043     </div>
1044
1045     <h2 id="variables-jumbotron">Jumbotron</h2>
1046     <div class="row">
1047       <div class="col-lg-4">
1048         <label>@jumbotron-bg</label>
1049         <input type="text" class="form-control" placeholder="@gray-lighter">
1050         <p class="help-block">Jumbotron background color</p>
1051       </div>
1052       <div class="col-lg-4">
1053         <label>@jumbotron-heading-color</label>
1054         <input type="text" class="form-control" placeholder="inherit">
1055         <p class="help-block">Jumbotron heading color</p>
1056       </div>
1057       <div class="col-lg-4">
1058         <label>@jumbotron-lead-color</label>
1059         <input type="text" class="form-control" placeholder="inherit">
1060         <p class="help-block">Jumbotron lead paragraph color</p>
1061       </div>
1062     </div>
1063
1064     <h2 id="variables-modals">Modals</h2>
1065     <div class="row">
1066       <div class="col-lg-4">
1067         <label>@modal-inner-padding</label>
1068         <input type="text" class="form-control" placeholder="20px">
1069         <p class="help-block">Padding applied to the modal body</p>
1070       </div>
1071       <div class="col-lg-4">
1072         <label>@modal-title-padding</label>
1073         <input type="text" class="form-control" placeholder="15px">
1074         <p class="help-block">Padding applied to the modal title</p>
1075       </div>
1076       <div class="col-lg-4">
1077         <label>@modal-title-line-height</label>
1078         <input type="text" class="form-control" placeholder="@line-height-base">
1079         <p class="help-block">Modal title line-height</p>
1080       </div>
1081       <div class="col-lg-4">
1082         <label>@modal-content-bg</label>
1083         <input type="text" class="form-control" placeholder="#fff">
1084         <p class="help-block">Background color of modal content area</p>
1085       </div>
1086       <div class="col-lg-4">
1087         <label>@modal-content-border-color</label>
1088         <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)">
1089         <p class="help-block">Modal content border color</p>
1090       </div>
1091       <div class="col-lg-4">
1092         <label>@modal-content-fallback-border-color</label>
1093         <input type="text" class="form-control" placeholder="#999">
1094         <p class="help-block">Modal content border color <strong>for IE8</strong></p>
1095       </div>
1096       <div class="col-lg-4">
1097         <label>@modal-backdrop-bg</label>
1098         <input type="text" class="form-control" placeholder="#000">
1099         <p class="help-block">Modal backdrop background color</p>
1100       </div>
1101       <div class="col-lg-4">
1102         <label>@modal-header-border-color</label>
1103         <input type="text" class="form-control" placeholder="#e5e5e5">
1104         <p class="help-block">Modal header border color</p>
1105       </div>
1106       <div class="col-lg-4">
1107         <label>@modal-footer-border-color</label>
1108         <input type="text" class="form-control" placeholder="@modal-header-border-color">
1109         <p class="help-block">Modal footer border color</p>
1110       </div>
1111     </div>
1112
1113     <h2 id="variables-carousel">Carousel</h2>
1114     <label>@carousel-text-shadow</label>
1115     <input type="text" class="form-control" placeholder="0 1px 2px rgba(0,0,0,.6)">
1116     <label>@carousel-control-color</label>
1117     <input type="text" class="form-control" placeholder="#fff">
1118     <label>@carousel-indicator-border-color</label>
1119     <input type="text" class="form-control" placeholder="#fff">
1120     <label>@carousel-indicator-active-bg</label>
1121     <input type="text" class="form-control" placeholder="#fff">
1122     <label>@carousel-caption-color</label>
1123     <input type="text" class="form-control" placeholder="#fff">
1124
1125     <h2 id="variables-list-group">List group</h2>
1126     <h3>Background</h3>
1127     <div class="row">
1128       <div class="col-lg-4">
1129         <label>@list-group-bg</label>
1130         <input type="text" class="form-control" placeholder="#fff">
1131         <p class="help-block">Default background color</p>
1132       </div>
1133       <div class="col-lg-4">
1134         <label>@list-group-hover-bg</label>
1135         <input type="text" class="form-control" placeholder="#f5f5f5">
1136         <p class="help-block">Background color of single list elements on hover</p>
1137       </div>
1138       <div class="col-lg-4">
1139         <label>@list-group-active-bg</label>
1140         <input type="text" class="form-control" placeholder="@component-active-bg">
1141         <p class="help-block">Background color of active list elements</p>
1142       </div>
1143     </div>
1144     <h3>Borders</h3>
1145     <div class="row">
1146       <div class="col-lg-4">
1147         <label>@list-group-border</label>
1148         <input type="text" class="form-control" placeholder="#ddd">
1149         <p class="help-block">Default border color</p>
1150       </div>
1151       <div class="col-lg-4">
1152         <label>@list-group-border-radius</label>
1153         <input type="text" class="form-control" placeholder="@border-radius-base">
1154         <p class="help-block">List group border radius</p>
1155       </div>
1156       <div class="col-lg-4">
1157         <label>@list-group-active-border</label>
1158         <input type="text" class="form-control" placeholder="@list-group-active-bg">
1159         <p class="help-block">Border color of active list elements</p>
1160       </div>
1161     </div>
1162     <label>@list-group-active-color</label>
1163     <input type="text" class="form-control" placeholder="#fff">
1164     <p class="help-block">Text color of active list elements</p>
1165     <h2 id="variables-thumbnails">Thumbnails</h2>
1166     <div class="row">
1167       <div class="col-lg-6">
1168         <label>@thumbnail-caption-color</label>
1169         <input type="text" class="form-control" placeholder="@text-color">
1170         <p class="help-block">Custom text color for thumbnail captions</p>
1171         <label>@thumbnail-bg</label>
1172         <input type="text" class="form-control" placeholder="@body-bg">
1173         <p class="help-block">Thumbnail background color</p>
1174       </div>
1175       <div class="col-lg-6">
1176         <label>@thumbnail-border</label>
1177         <input type="text" class="form-control" placeholder="#ddd">
1178         <p class="help-block">Thumbnail border color</p>
1179         <label>@thumbnail-border-radius</label>
1180         <input type="text" class="form-control" placeholder="@border-radius-base">
1181         <p class="help-block">Thumbnail border radius</p>
1182       </div>
1183     </div>
1184     <h2 id="variables-progress">Progress bars</h2>
1185     <div class="row">
1186       <div class="col-lg-4">
1187         <label>@progress-bg</label>
1188         <input type="text" class="form-control" placeholder="#f5f5f5">
1189         <p class="help-block">Background color of the whole progress component</p>
1190       </div>
1191       <div class="col-lg-4">
1192         <label>@progress-bar-bg</label>
1193         <input type="text" class="form-control" placeholder="@brand-primary">
1194         <p class="help-block">Default progress bar color</p>
1195       </div>
1196       <div class="col-lg-4">
1197         <label>@progress-bar-success-bg</label>
1198         <input type="text" class="form-control" placeholder="@brand-success">
1199         <p class="help-block">Success progress bar color</p>
1200       </div>
1201     </div>
1202     <div class="row">
1203       <div class="col-lg-4">
1204         <label>@progress-bar-warning-bg</label>
1205         <input type="text" class="form-control" placeholder="@brand-warning">
1206         <p class="help-block">Warning progress bar color</p>
1207       </div>
1208       <div class="col-lg-4">
1209         <label>@progress-bar-danger-bg</label>
1210         <input type="text" class="form-control" placeholder="@brand-danger">
1211         <p class="help-block">Danger progress bar color</p>
1212       </div>
1213       <div class="col-lg-4">
1214         <label>@progress-bar-info-bg</label>
1215         <input type="text" class="form-control" placeholder="@brand-info">
1216         <p class="help-block">Info progress bar color</p>
1217       </div>
1218       <div class="col-lg-4">
1219         <label>@progress-bar-color</label>
1220         <input type="text" class="form-control" placeholder="#fff">
1221         <p class="help-block">Info progress bar text color</p>
1222       </div>
1223       <div class="col-lg-4">
1224         <label>@progress-bar-text-shadow</label>
1225         <input type="text" class="form-control" placeholder="0 -1px 0 rgba(0,0,0,.25)">
1226         <p class="help-block">Info progress bar text shadow</p>
1227       </div>
1228     </div>
1229     <h2 id="variables-pagination">Pagination</h2>
1230     <div class="row">
1231       <div class="col-lg-4">
1232         <label>@pagination-bg</label>
1233         <input type="text" class="form-control" placeholder="#fff">
1234         <p class="help-block">Background color</p>
1235       </div>
1236       <div class="col-lg-4">
1237         <label>@pagination-border</label>
1238         <input type="text" class="form-control" placeholder="#ddd">
1239         <p class="help-block">Border color</p>
1240       </div>
1241       <div class="col-lg-4">
1242         <label>@pagination-active-bg</label>
1243         <input type="text" class="form-control" placeholder="#f5f5f5">
1244         <p class="help-block">Active background color</p>
1245       </div>
1246       <div class="col-lg-4">
1247         <label>@pagination-active-color</label>
1248         <input type="text" class="form-control" placeholder="@gray-light">
1249         <p class="help-block">Active text color</p>
1250       </div>
1251       <div class="col-lg-4">
1252         <label>@pagination-disabled-color</label>
1253         <input type="text" class="form-control" placeholder="@gray-light">
1254         <p class="help-block">Disabled text color</p>
1255       </div>
1256     </div>
1257     <h2 id="variables-pager">Pager</h2>
1258     <div class="row">
1259       <div class="col-lg-4">
1260         <label>@pager-border-radius</label>
1261         <input type="text" class="form-control" placeholder="15px">
1262         <p class="help-block">Pager border radius</p>
1263       </div>
1264       <div class="col-lg-4">
1265         <label>@pager-disabled-color</label>
1266         <input type="text" class="form-control" placeholder="@gray-light">
1267         <p class="help-block">Pager disabled state color</p>
1268       </div>
1269     </div>
1270
1271     <h2 id="variables-labels">Labels</h2>
1272     <div class="row">
1273       <div class="col-lg-6">
1274         <label>@label-success-bg</label>
1275         <input type="text" class="form-control" placeholder="@brand-success">
1276         <p class="help-block">Success label background color</p>
1277         <label>@label-info-bg</label>
1278         <input type="text" class="form-control" placeholder="@brand-info">
1279         <p class="help-block">Info label background color</p>
1280       </div>
1281       <div class="col-lg-6">
1282         <label>@label-warning-bg</label>
1283         <input type="text" class="form-control" placeholder="@brand-warning">
1284         <p class="help-block">Warning label background color</p>
1285         <label>@label-danger-bg</label>
1286         <input type="text" class="form-control" placeholder="@brand-danger">
1287         <p class="help-block">Danger label background color</p>
1288       </div>
1289     </div>
1290     <h2 id="variables-tooltips-popovers">Tooltips and popovers</h2>
1291     <h3>Tooltip styles</h3>
1292     <div class="row">
1293       <div class="col-lg-6">
1294         <label>@tooltip-color</label>
1295         <input type="text" class="form-control" placeholder="#fff">
1296         <p class="help-block">Tooltip text color</p>
1297         <label>@tooltip-bg</label>
1298         <input type="text" class="form-control" placeholder="rgba(0,0,0,.9)">
1299         <p class="help-block">Tooltip background color</p>
1300       </div>
1301       <div class="col-lg-6">
1302         <label>@tooltip-arrow-width</label>
1303         <input type="text" class="form-control" placeholder="5px">
1304         <p class="help-block">Tooltip arrow width</p>
1305         <label>@tooltip-arrow-color</label>
1306         <input type="text" class="form-control" placeholder="@tooltip-bg">
1307         <p class="help-block">Tooltip arrow color</p>
1308       </div>
1309       <div class="col-lg-6">
1310         <label>@tooltip-max-width</label>
1311         <input type="text" class="form-control" placeholder="200px">
1312         <p class="help-block">Tooltip max width</p>
1313       </div>
1314     </div>
1315     <h3>Popover styles</h3>
1316     <div class="row">
1317       <div class="col-lg-6">
1318         <label>@popover-bg</label>
1319         <input type="text" class="form-control" placeholder="#fff">
1320         <p class="help-block">Popover body background color</p>
1321         <label>@popover-title-bg</label>
1322         <input type="text" class="form-control" placeholder="darken(@popover-bg, 3%)">
1323         <p class="help-block">Popover title background color</p>
1324       </div>
1325       <div class="col-lg-6">
1326         <label>@popover-arrow-width</label>
1327         <input type="text" class="form-control" placeholder="10px">
1328         <p class="help-block">Popover arrow width</p>
1329         <label>@popover-arrow-color</label>
1330         <input type="text" class="form-control" placeholder="#fff">
1331         <p class="help-block">Popover arrow color</p>
1332       </div>
1333     </div>
1334     <div class="row">
1335       <div class="col-lg-6">
1336         <label>@popover-arrow-outer-width</label>
1337         <input type="text" class="form-control" placeholder="(@popover-arrow-width 1)">
1338         <p class="help-block">Popover outer arrow width</p>
1339       </div>
1340       <div class="col-lg-6">
1341         <label>@popover-arrow-outer-color</label>
1342         <input type="text" class="form-control" placeholder="rgba(0,0,0,.25)">
1343         <p class="help-block">Popover outer arrow color</p>
1344       </div>
1345       <div class="col-lg-6">
1346         <label>@popover-arrow-outer-fallback-color</label>
1347         <input type="text" class="form-control" placeholder="#999">
1348         <p class="help-block">Popover outer arrow fallback color</p>
1349       </div>
1350     </div>
1351     <div class="row">
1352       <div class="col-lg-6">
1353         <label>@popover-max-width</label>
1354         <input type="text" class="form-control" placeholder="276px">
1355         <p class="help-block">Popover maximum width</p>
1356       </div>
1357       <div class="col-lg-6">
1358         <label>@popover-border-color</label>
1359         <input type="text" class="form-control" placeholder="rgba(0,0,0,.2)">
1360         <p class="help-block">Popover border color</p>
1361       </div>
1362       <div class="col-lg-6">
1363         <label>@popover-fallback-border-color</label>
1364         <input type="text" class="form-control" placeholder="#ccc">
1365         <p class="help-block">Popover fallback border color</p>
1366       </div>
1367     </div>
1368
1369     <h2 id="variables-close">Close button</h2>
1370     <div class="row">
1371       <div class="col-lg-6">
1372         <label>@close-color</label>
1373         <input type="text" class="form-control" placeholder="#000">
1374       </div>
1375       <div class="col-lg-6">
1376       <label>@close-text-shadow</label>
1377       <input type="text" class="form-control" placeholder="0 1px 0 #fff">
1378       </div>
1379     </div>
1380
1381     <h2 id="variables-type">Type</h2>
1382     <div class="row">
1383       <div class="col-lg-6">
1384         <label>@text-muted</label>
1385         <input type="text" class="form-control" placeholder="@gray-light">
1386         <p class="help-block">Text muted color</p>
1387       </div>
1388       <div class="col-lg-6">
1389         <label>@abbr-border-color</label>
1390         <input type="text" class="form-control" placeholder="@gray-light">
1391         <p class="help-block">Abbreviations and acronyms border color</p>
1392       </div>
1393       <div class="col-lg-6">
1394         <label>@headings-small-color</label>
1395         <input type="text" class="form-control" placeholder="@gray-light">
1396         <p class="help-block">Headings small color</p>
1397       </div>
1398       <div class="col-lg-6">
1399         <label>@blockquote-small-color</label>
1400         <input type="text" class="form-control" placeholder="@gray-light">
1401         <p class="help-block">Blockquote small color</p>
1402       </div>
1403       <div class="col-lg-6">
1404         <label>@blockquote-border-color</label>
1405         <input type="text" class="form-control" placeholder="@gray-lighter">
1406         <p class="help-block">Blockquote border color</p>
1407       </div>
1408       <div class="col-lg-6">
1409         <label>@page-header-border-color</label>
1410         <input type="text" class="form-control" placeholder="@gray-lighter">
1411         <p class="help-block">Pag header border color</p>
1412       </div>
1413     </div>
1414     <h2 id="variables-other">Other</h2>
1415     <div class="row">
1416       <div class="col-lg-6">
1417         <label>@hr-border</label>
1418         <input type="text" class="form-control" placeholder="@gray-lighter">
1419         <p class="help-block">Horizontal line color</p>
1420       </div>
1421       <div class="col-lg-6">
1422         <label>@component-offset-horizontal</label>
1423         <input type="text" class="form-control" placeholder="180px">
1424         <p class="help-block">Horizontal offset for forms and lists</p>
1425       </div>
1426     </div>
1427   </div>
1428
1429   <div class="bs-docs-section">
1430     <div class="page-header">
1431       <h1 id="download">Download</h1>
1432     </div>
1433     <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>
1434     <div class="bs-customize-download">
1435       <a class="btn btn-block btn-large btn-bs" href="#" onclick="_gaq.push(['_trackEvent', 'Customize', 'Download', 'Customize and Download']);">Customize and Download</a>
1436     </div>
1437     <div class="bs-callout bs-callout-danger">
1438       <h4>What's included?</h4>
1439       <p>Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.</p>
1440     </div>
1441   </div><!-- /download -->
1442 </form>