2013-04-01 07:11:47 +00:00
---
2013-08-10 23:11:10 +00:00
layout: default
2013-04-01 07:11:47 +00:00
title: Customize and download
2013-05-09 04:56:08 +00:00
slug: customize
2013-05-23 00:30:58 +00:00
lead: Customize Bootstrap's components, LESS variables, and jQuery plugins to get your very own version.
2013-07-27 07:18:12 +00:00
base_url: "../"
2013-04-01 07:11:47 +00:00
---
2013-08-18 00:26:36 +00:00
<!-- Customizer form -->
2013-08-12 01:41:31 +00:00
< form class = "bs-customizer" role = "form" >
2013-08-08 06:06:29 +00:00
< div class = "bs-docs-section" id = "less-section" >
2013-07-26 18:11:09 +00:00
< div class = "page-header" >
< button class = "btn btn-default toggle" type = "button" > Toggle all< / button >
2013-07-27 02:38:12 +00:00
< h1 id = "less" > LESS files< / h1 >
2013-07-26 18:11:09 +00:00
< / div >
2013-07-27 07:35:26 +00:00
< p class = "lead" > Choose which LESS files to compile into your custom build of Bootstrap. Not sure which files to use? Read through the < a href = "../css/" > CSS< / a > and < a href = "../components/" > Components< / a > pages in the docs< / p >
2013-05-23 06:45:12 +00:00
2013-07-26 18:11:09 +00:00
< div class = "row" >
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-08-19 06:36:36 +00:00
< h3 > Common CSS< / h3 >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "print.less" >
Print media styles
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "type.less" >
Typography
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "code.less" >
Code
< / label >
< / div >
2013-08-19 06:36:36 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "grid.less" >
Grid system
< / label >
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "tables.less" >
Tables
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 07:54:53 +00:00
< input type = "checkbox" checked value = "forms.less" data-dependents = "navbar.less,input-groups.less" >
2013-07-26 18:11:09 +00:00
Forms
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-18 05:51:00 +00:00
< input type = "checkbox" checked value = "buttons.less" >
2013-07-26 18:11:09 +00:00
Buttons
< / label >
< / div >
2013-08-19 06:36:36 +00:00
< / div > <!-- .col - xs - 6 .col - sm - 4 -->
2013-08-16 03:25:43 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-08-19 06:36:36 +00:00
< h3 > Components< / h3 >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "glyphicons.less" >
Glyphicons
2013-07-26 18:11:09 +00:00
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "button-groups.less" data-dependency = "buttons.less" >
Button groups
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "input-groups.less" data-dependency = "forms.less" >
Input groups
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "navs.less" data-dependents = "navbar.less" >
2013-07-26 18:11:09 +00:00
Navs
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "navbar.less" data-dependencies = "forms.less,utilities.less,navs.less" >
2013-07-26 18:11:09 +00:00
Navbar
< / label >
< / div >
2013-08-19 06:36:36 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "breadcrumbs.less" >
Breadcrumbs
< / label >
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "pagination.less" >
Pagination
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "pager.less" >
Pager
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "labels.less" >
Labels
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "badges.less" >
Badges
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "jumbotron.less" >
Jumbotron
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "thumbnails.less" >
Thumbnails
2013-07-26 18:11:09 +00:00
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "alerts.less" >
Alerts
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "progress-bars.less" >
Progress bars
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "media.less" >
Media items
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "list-group.less" >
List groups
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "panels.less" >
Panels
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "wells.less" >
Wells
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "close.less" >
Close icon
2013-07-26 18:11:09 +00:00
< / label >
< / div >
2013-08-19 06:36:36 +00:00
< / div > <!-- .col - xs - 6 .col - sm - 4 -->
< div class = "col-xs-6 col-sm-4" >
< h3 > JavaScript components< / h3 >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "dropdowns.less" >
Dropdowns
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "tooltip.less" >
Tooltips
2013-07-26 18:11:09 +00:00
< / label >
< / div >
2013-08-16 03:25:43 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "popovers.less" >
Popovers
2013-08-16 03:25:43 +00:00
< / label >
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "modals.less" >
Modals
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "carousel.less" >
Carousel
2013-07-26 18:11:09 +00:00
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-08-19 06:36:36 +00:00
< h3 > Utilities< / h3 >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "utilities.less" data-dependents = "navbar.less" >
Basic utilities
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "responsive-utilities.less" >
Responsive utilities
2013-07-26 18:11:09 +00:00
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-19 06:36:36 +00:00
< input type = "checkbox" checked value = "component-animations.less" >
Component animations (for JS)
2013-07-26 18:11:09 +00:00
< / label >
< / div >
2013-08-19 06:36:36 +00:00
< / div > <!-- .col - xs - 6 .col - sm - 4 -->
< / div > <!-- /.row -->
2013-07-26 18:11:09 +00:00
< / div >
2013-05-23 06:34:28 +00:00
2013-05-24 04:34:32 +00:00
2013-08-08 06:06:29 +00:00
< div class = "bs-docs-section" id = "plugin-section" >
2013-07-26 18:11:09 +00:00
< div class = "page-header" >
< button class = "btn btn-default toggle" type = "button" > Toggle all< / button >
2013-07-27 02:38:12 +00:00
< h1 id = "plugins" > jQuery plugins< / h1 >
2013-07-26 18:11:09 +00:00
< / div >
2013-07-27 07:28:23 +00:00
< p class = "lead" > Choose which jQuery plugins should be included in your custom JavaScript files. Unsure what to include? Read the < a href = "../javascript/" > JavaScript< / a > page in the docs.< / p >
2013-07-26 18:11:09 +00:00
< div class = "row" >
< div class = "col-lg-6" >
< h4 > Linked to components< / h4 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "alert.js" >
Alert dismissal
< / label >
2013-07-26 12:04:15 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "button.js" >
Advanced buttons
< / label >
2013-05-23 00:30:58 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "carousel.js" >
Carousel functionality
< / label >
2013-07-26 12:04:15 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "dropdown.js" >
Dropdowns
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "modal.js" >
Modals
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-18 05:51:00 +00:00
< input type = "checkbox" checked value = "tooltip.js" >
2013-07-26 18:11:09 +00:00
Tooltips
< / label >
< / div >
< div class = "checkbox" >
< label >
2013-08-18 05:51:00 +00:00
< input type = "checkbox" checked value = "popover.js" data-dependency = "tooltip.js" >
2013-07-26 18:11:09 +00:00
Popovers < small > (requires Tooltips)< / small >
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "tab.js" >
2013-08-19 04:34:17 +00:00
Togglable tabs
2013-07-26 18:11:09 +00:00
< / label >
2013-07-26 12:04:15 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h4 > Magic< / h4 >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "affix.js" >
Affix
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "collapse.js" >
Collapse
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "scrollspy.js" >
Scrollspy
< / label >
< / div >
< div class = "checkbox" >
< label >
< input type = "checkbox" checked value = "transition.js" >
Transitions < small > (required for any kind of animation)< / small >
< / label >
< / div >
< / div >
2013-05-09 04:56:08 +00:00
< / div >
2013-05-23 06:34:28 +00:00
2013-07-26 18:11:09 +00:00
< div class = "bs-callout bs-callout-info" >
< h4 > Produces two files< / h4 >
< p > All checked plugins will be compiled into a readable < code > bootstrap.js< / code > and a minified < code > bootstrap.min.js< / code > . We recommend you use the minified version in production.< / p >
< / div >
2013-05-23 06:34:28 +00:00
2013-07-26 18:11:09 +00:00
< div class = "bs-callout bs-callout-danger" >
< h4 > jQuery required< / h4 >
< p > All plugins require the latest version of < a href = "http://jquery.com/" target = "_blank" > jQuery< / a > to be included.< / p >
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-08-08 06:06:29 +00:00
< div class = "bs-docs-section" id = "less-variables-section" >
2013-07-26 18:11:09 +00:00
< div class = "page-header" >
< button class = "btn btn-default toggle" type = "button" > Reset to defaults< / button >
2013-07-27 02:38:12 +00:00
< h1 id = "less-variables" > LESS variables< / h1 >
2013-07-26 18:11:09 +00:00
< / div >
< p class = "lead" > Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.< / p >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-basics" > Basics< / h2 >
2013-07-14 10:50:14 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Body background< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @body-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@body-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color applied to < code > < body> < / code > .< / p >
< / div >
< / div >
2013-07-24 06:13:15 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Typography< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @font-family-sans-serif< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "'Helvetica Neue', Helvetica, Arial, sans-serif" data-var = "@font-family-sans-serif" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default sans-serif fonts.< / p >
< label > @font-family-serif< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "Georgia, 'Times New Roman', Times, serif" data-var = "@font-family-serif" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default serif fonts.< / p >
< label > @font-family-monospace< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "Monaco, Menlo, Consolas, 'Courier New', monospace" data-var = "@font-family-monospace" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default monospace fonts for < code > < code> < / code > and < code > < pre> < / code > .< / p >
< / div >
< div class = "col-lg-6" >
< label > @font-family-base< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@font-family-sans-serif" data-var = "@font-family-base" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to globally set font-family in Bootstrap.< / p >
< label > @font-size-base< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "14px" data-var = "@font-size-base" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to calculate font-size throughout Bootstrap.< / p >
< label > @line-height-base< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "1.428571429" data-var = "@line-height-base" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to calculate line-height throughout Bootstrap.< / p >
< / div >
2013-08-21 01:47:04 +00:00
< div class = "col-lg-6" >
< label > @font-size-h1< / label >
< input type = "text" class = "form-control" placeholder = "floor(@font-size-base * 2.60)" data-var = "@font-size-h1" >
< label > @font-size-h2< / label >
< input type = "text" class = "form-control" placeholder = "floor(@font-size-base * 2.15)" data-var = "@font-size-h2" >
< label > @font-size-h3< / label >
< input type = "text" class = "form-control" placeholder = "ceil(@font-size-base * 1.70)" data-var = "@font-size-h3" >
< / div >
< div class = "col-lg-6" >
< label > @font-size-h4< / label >
< input type = "text" class = "form-control" placeholder = "ceil(@font-size-base * 1.25)" data-var = "@font-size-h4" >
< label > @font-size-h5< / label >
< input type = "text" class = "form-control" placeholder = "@font-size-base" data-var = "@font-size-h5" >
< label > @font-size-h6< / label >
< input type = "text" class = "form-control" placeholder = "ceil(@font-size-base * 0.85)" data-var = "@font-size-h6" >
< / div >
2013-07-26 18:11:09 +00:00
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Code blocks< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @code-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#c7254e" data-var = "@code-color" >
2013-07-26 18:11:09 +00:00
< label > @code-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f9f2f4" data-var = "@code-bg" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
2013-08-12 03:45:51 +00:00
< label > @pre-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-dark" data-var = "@pre-color" >
2013-07-26 18:11:09 +00:00
< label > @pre-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@pre-bg" >
2013-08-12 03:45:51 +00:00
< label > @pre-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@pre-border-color" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h4 > Headings< / h4 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @headings-font-family< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@font-family-base" data-var = "@headings-font-family" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Choose a separate font-family for headings.< / p >
< label > @headings-font-weight< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "500" data-var = "@headings-font-weight" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Choose a separate font-weight for headings.< / p >
< / div >
< div class = "col-lg-6" >
< label > @headings-line-height< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "1.1" data-var = "@headings-line-height" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Choose a separate line-height for headings.< / p >
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Colors< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< p > Define custom colors used in several contexts.< / p >
< label > @brand-primary< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#428bca" data-var = "@brand-primary" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used for primary buttons, panels and more.< / p >
< label > @brand-success< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#5cb85c" data-var = "@brand-success" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to indicate success.< / p >
< label > @brand-warning< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f0ad4e" data-var = "@brand-warning" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to indicate a warning.< / p >
< label > @brand-danger< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#d9534f" data-var = "@brand-danger" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to indicate danger.< / p >
< label > @brand-info< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#5bc0de" data-var = "@brand-info" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used to indicate informational content.< / p >
< / div >
< div class = "col-lg-6" >
< p > Define your preferred colors for standard text and links.< / p >
< label > @text-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-dark" data-var = "@text-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Global color set on the body.< / p >
< label > @link-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@link-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Global link color for text.< / p >
< label > @link-color-hover< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(@link-color, 15%)" data-var = "@link-color-hover" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Automatically darken links on hover via color function.< / p >
< / div >
< / div >
2013-07-14 10:50:14 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Media queries breakpoints< / h3 >
< p > Define the breakpoints at which your layout will change, adapting to different screen sizes.< / p >
< div class = "row" >
2013-08-17 22:21:38 +00:00
< div class = "col-xs-6" >
2013-08-24 06:33:16 +00:00
< label > @screen-xs-min< / label >
< input type = "text" class = "form-control" placeholder = "480px" data-var = "@screen-xs-min" >
< label > @screen-sm-min< / label >
< input type = "text" class = "form-control" placeholder = "768px" data-var = "@screen-sm-min" >
2013-07-26 18:11:09 +00:00
< / div >
2013-08-17 22:21:38 +00:00
< div class = "col-xs-6" >
2013-08-24 06:33:16 +00:00
< label > @screen-md-min< / label >
< input type = "text" class = "form-control" placeholder = "992px" data-var = "@screen-md-min" >
< label > @screen-lg-min< / label >
< input type = "text" class = "form-control" placeholder = "1200px" data-var = "@screen-lg-min" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Container sizes< / h3 >
< p > Define the maximum width of < code > .container< / code > for different screen sizes.< / p >
< div class = "row" >
2013-08-17 22:21:38 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @container-tablet< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "728px" data-var = "@container-tablet" >
2013-08-24 06:33:16 +00:00
< p class = "help-block" > For < code > @screen-sm-min< / code > and up.< / p >
2013-08-17 22:21:38 +00:00
< / div >
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @container-desktop< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "940px" data-var = "@container-desktop" >
2013-08-24 06:33:16 +00:00
< p class = "help-block" > For < code > @screen-md-min< / code > and up.< / p >
2013-07-26 18:11:09 +00:00
< / div >
2013-08-17 22:21:38 +00:00
< div class = "clearfix visible-xs" > < / div >
< div class = "col-xs-6 col-sm-4" >
< label > @container-lg-desktop< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "1170px" data-var = "@container-lg-desktop" >
2013-08-24 06:33:16 +00:00
< p class = "help-block" > For < code > @screen-lg-min< / code > and up.< / p >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Grid system< / h3 >
< p > Define your custom responsive grid.< / p >
< div class = "row" >
2013-08-19 16:17:49 +00:00
<!--
Temporarily removed until mixins are restored in v3.1
2013-08-17 22:21:38 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @grid-columns< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "12" data-var = "@grid-columns" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Number of columns in the grid.< / p >
2013-08-17 22:21:38 +00:00
< / div >
2013-08-19 16:17:49 +00:00
-->
2013-08-17 22:21:38 +00:00
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @grid-gutter-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "30px" data-var = "@grid-gutter-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Padding between columns.< / p >
< / div >
2013-08-17 22:21:38 +00:00
< div class = "clearfix visible-xs" > < / div >
< div class = "col-xs-6 col-sm-4" >
2013-07-26 18:11:09 +00:00
< label > @grid-float-breakpoint< / label >
2013-08-24 06:33:16 +00:00
< input type = "text" class = "form-control" placeholder = "@screen-sm-min" data-var = "@grid-float-breakpoint" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Point at which the navbar stops collapsing.< / p >
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Components< / h3 >
< p > Define common padding and border radius sizes and more.< / p >
< div class = "row" >
< div class = "col-lg-6" >
< h4 > Padding< / h4 >
< label > @padding-base-vertical< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "8px" data-var = "@padding-base-vertical" >
2013-07-26 18:11:09 +00:00
< label > @padding-base-horizontal< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "12px" data-var = "@padding-base-horizontal" >
2013-07-26 18:11:09 +00:00
< label > @padding-large-vertical< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "14px" data-var = "@padding-large-vertical" >
2013-07-26 18:11:09 +00:00
< label > @padding-large-horizontal< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "16px" data-var = "@padding-large-horizontal" >
2013-07-26 18:11:09 +00:00
< label > @padding-small-vertical< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "5px" data-var = "@padding-small-vertical" >
2013-07-26 18:11:09 +00:00
< label > @padding-small-horizontal< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "10px" data-var = "@padding-small-horizontal" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h4 > Border radius sizes< / h4 >
< label > @border-radius-base< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "4px" data-var = "@border-radius-base" >
2013-07-26 18:11:09 +00:00
< label > @border-radius-large< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "6px" data-var = "@border-radius-large" >
2013-07-26 18:11:09 +00:00
< label > @border-radius-small< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "3px" data-var = "@border-radius-small" >
2013-07-26 18:11:09 +00:00
< h4 > Active background color< / h4 >
< label > @component-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@component-active-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Used for active or hovered items in places like navs or dropdowns.< / p >
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-buttons" > Buttons< / h2 >
< p > For each of Bootstrap's buttons, define text, background and border color.< / p >
< div class = "row" >
< div class = "col-lg-6" >
< h4 > Default< / h4 >
< label > @btn-default-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@btn-default-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-default-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#474949" data-var = "@btn-default-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-default-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-bg" data-var = "@btn-default-border" >
2013-07-26 18:11:09 +00:00
< h4 > Primary< / h4 >
< label > @btn-primary-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-primary-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-primary-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@btn-primary-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-primary-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-primary-bg" data-var = "@btn-primary-border" >
2013-07-26 18:11:09 +00:00
< h4 > Info< / h4 >
< label > @btn-info-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-info-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-info" data-var = "@btn-info-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-info-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-info-bg" data-var = "@btn-info-border" >
2013-07-26 18:11:09 +00:00
< h4 > Button hover< / h4 >
< label > @btn-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-hover-color" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h4 > Success< / h4 >
< label > @btn-success-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-success-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-success" data-var = "@btn-success-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-success-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-success-bg" data-var = "@btn-success-border" >
2013-07-26 18:11:09 +00:00
< h4 > Warning< / h4 >
< label > @btn-warning-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-warning-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-warning-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-warning" data-var = "@btn-warning-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-warning-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-warning-bg" data-var = "@btn-warning-border" >
2013-07-26 18:11:09 +00:00
< h4 > Danger< / h4 >
< label > @btn-danger-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-default-color" data-var = "@btn-danger-color" >
2013-07-26 18:11:09 +00:00
< label > @btn-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-danger" data-var = "@btn-danger-bg" >
2013-07-26 18:11:09 +00:00
< label > @btn-danger-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@btn-danger-bg" data-var = "@btn-danger-border" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-form-states" > Form states and alerts< / h2 >
< p > Define colors for form feedback states and, by default, alerts.< / p >
< div class = "row" >
< div class = "col-lg-6" >
< h4 > Success< / h4 >
< label > @state-success-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#468847" data-var = "@state-success-text" >
2013-07-26 18:11:09 +00:00
< label > @state-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#dff0d8" data-var = "@state-success-bg" >
2013-07-26 18:11:09 +00:00
< label > @state-success-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(spin(@state-success-bg, -10), 5%)" data-var = "@state-success-border" >
2013-07-26 18:11:09 +00:00
< h4 > Warning< / h4 >
< label > @state-warning-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#c09853" data-var = "@state-warning-text" >
2013-07-26 18:11:09 +00:00
< label > @state-warning-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fcf8e3" data-var = "@state-warning-bg" >
2013-07-26 18:11:09 +00:00
< label > @state-warning-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(spin(@state-warning-bg, -10), 3%)" data-var = "@state-warning-border" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h4 > Danger< / h4 >
< label > @state-danger-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#b94a48" data-var = "@state-danger-text" >
2013-07-26 18:11:09 +00:00
< label > @state-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f2dede" data-var = "@state-danger-bg" >
2013-07-26 18:11:09 +00:00
< label > @state-danger-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(spin(@state-danger-bg, -10), 3%)" data-var = "@state-danger-border" >
2013-07-26 18:11:09 +00:00
< h4 > Info< / h4 >
< label > @state-info-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#3a87ad" data-var = "@state-info-text" >
2013-07-26 18:11:09 +00:00
< label > @state-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#d9edf7" data-var = "@state-info-bg" >
2013-07-26 18:11:09 +00:00
< label > @state-info-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(spin(@state-info-bg, -10), 7%)" data-var = "@state-info-border" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-alerts" > Alerts< / h2 >
2013-08-05 22:29:19 +00:00
< p > Define alert colors, border radius, and padding.< / p >
2013-07-26 18:11:09 +00:00
< h4 > Border radius< / h4 >
2013-08-05 22:06:57 +00:00
< label > @alert-padding< / label >
2013-08-19 04:29:46 +00:00
< input type = "text" class = "form-control" placeholder = "15px" data-var = "@alert-padding" >
2013-07-26 18:11:09 +00:00
< label > @alert-border-radius< / label >
2013-08-19 04:29:46 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@alert-border-radius" >
2013-07-26 18:11:09 +00:00
< div class = "row" >
< div class = "col-lg-6" >
2013-08-05 22:06:57 +00:00
< h4 > Default (Warning)< / h4 >
< label > @alert-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-text" data-var = "@alert-text" >
2013-08-05 22:06:57 +00:00
< label > @alert-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-bg" data-var = "@alert-bg" >
2013-08-05 22:06:57 +00:00
< label > @alert-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-border" data-var = "@alert-border" >
2013-07-26 18:11:09 +00:00
< h4 > Success< / h4 >
< label > @alert-success-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-text" data-var = "@alert-success-text" >
2013-07-26 18:11:09 +00:00
< label > @alert-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-bg" data-var = "@alert-success-bg" >
2013-07-26 18:11:09 +00:00
< label > @alert-success-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-border" data-var = "@alert-success-border" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h4 > Danger< / h4 >
< label > @alert-danger-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-text" data-var = "@alert-danger-text" >
2013-07-26 18:11:09 +00:00
< label > @alert-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-bg" data-var = "@alert-danger-bg" >
2013-07-26 18:11:09 +00:00
< label > @alert-danger-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-border" data-var = "@alert-danger-border" >
2013-07-26 18:11:09 +00:00
< h4 > Info< / h4 >
< label > @alert-info-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-text" data-var = "@alert-info-text" >
2013-07-26 18:11:09 +00:00
< label > @alert-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-bg" data-var = "@alert-info-bg" >
2013-07-26 18:11:09 +00:00
< label > @alert-info-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-border" data-var = "@alert-info-border" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-07-25 17:50:59 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-navbar" > Navbar< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< h3 > Default navbar< / h3 >
< h4 > Basics< / h4 >
< label > @navbar-height< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "50px" data-var = "@navbar-height" >
2013-08-12 03:33:58 +00:00
< label > @navbar-margin-bottom< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@line-height-computed" data-var = "@navbar-margin-bottom" >
2013-08-18 21:05:56 +00:00
< label > @navbar-default-color< / label >
< input type = "text" class = "form-control" placeholder = "#777" data-var = "@navbar-default-color" >
< label > @navbar-default-bg< / label >
< input type = "text" class = "form-control" placeholder = "#eee" data-var = "@navbar-default-bg" >
2013-08-05 07:47:23 +00:00
< label > @navbar-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@navbar-border-radius" >
2013-07-26 18:11:09 +00:00
< h4 > Links< / h4 >
2013-08-18 21:05:56 +00:00
< label > @navbar-default-link-color< / label >
< input type = "text" class = "form-control" placeholder = "#777" data-var = "@navbar-default-link-color" >
< label > @navbar-default-link-hover-color< / label >
< input type = "text" class = "form-control" placeholder = "#333" data-var = "@navbar-default-link-hover-color" >
< label > @navbar-default-link-hover-bg< / label >
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-default-link-hover-bg" >
< label > @navbar-default-link-active-color< / label >
< input type = "text" class = "form-control" placeholder = "#555" data-var = "@navbar-default-link-active-color" >
< label > @navbar-default-link-active-bg< / label >
< input type = "text" class = "form-control" placeholder = "darken(@navbar-bg, 10%)" data-var = "@navbar-default-link-active-bg" >
< label > @navbar-default-link-disabled-color< / label >
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@navbar-default-link-disabled-color" >
< label > @navbar-default-link-disabled-bg< / label >
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-default-link-disabled-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Brand< / h4 >
2013-08-18 21:05:56 +00:00
< label > @navbar-default-brand-color< / label >
< input type = "text" class = "form-control" placeholder = "@navbar-link-color" data-var = "@navbar-default-brand-color" >
< label > @navbar-default-brand-hover-color< / label >
< input type = "text" class = "form-control" placeholder = "darken(@navbar-link-color, 10%)" data-var = "@navbar-default-brand-hover-color" >
< label > @navbar-default-brand-hover-bg< / label >
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-default-brand-hover-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Toggle< / h4 >
2013-08-18 21:05:56 +00:00
< label > @navbar-default-toggle-hover-bg< / label >
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@navbar-default-toggle-hover-bg" >
< label > @navbar-default-toggle-icon-bar-bg< / label >
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@navbar-default-toggle-icon-bar-bg" >
< label > @navbar-default-toggle-border-color< / label >
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@navbar-default-toggle-border-color" >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h3 > Inverted navbar< / h3 >
< h4 > Basics< / h4 >
< label > @navbar-inverse-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@navbar-inverse-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#222" data-var = "@navbar-inverse-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Links< / h4 >
< label > @navbar-inverse-link-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@navbar-inverse-link-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@navbar-inverse-link-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-inverse-link-hover-bg" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@navbar-inverse-link-hover-color" data-var = "@navbar-inverse-link-active-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(@navbar-inverse-bg, 10%)" data-var = "@navbar-inverse-link-active-bg" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-disabled-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#444" data-var = "@navbar-inverse-link-disabled-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-link-disabled-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-inverse-link-disabled-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Brand< / h4 >
< label > @navbar-inverse-brand-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@navbar-inverse-link-color" data-var = "@navbar-inverse-brand-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-brand-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@navbar-inverse-brand-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-brand-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@navbar-inverse-brand-hover-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Toggle< / h4 >
< label > @navbar-inverse-toggle-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#333" data-var = "@navbar-inverse-toggle-hover-bg" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-toggle-icon-bar-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@navbar-inverse-toggle-icon-bar-bg" >
2013-07-26 18:11:09 +00:00
< label > @navbar-inverse-toggle-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#333" data-var = "@navbar-inverse-toggle-border-color" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-07-25 17:50:59 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-nav" > Nav< / h2 >
2013-07-26 18:17:48 +00:00
< h3 > Default nav< / h3 >
2013-07-26 18:11:09 +00:00
< div class = "row" >
< div class = "col-lg-6" >
2013-07-26 18:17:48 +00:00
< h4 > Common values< / h4 >
2013-08-15 20:58:23 +00:00
< label > @nav-link-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "10px 15px" data-var = "@nav-link-padding" >
2013-07-26 18:11:09 +00:00
< label > @nav-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@nav-link-hover-bg" >
2013-07-26 18:11:09 +00:00
< label > @nav-disabled-link-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@nav-disabled-link-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-disabled-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@nav-disabled-link-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-open-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@nav-open-link-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-open-caret-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@fff" data-var = "@nav-open-caret-border-color" >
2013-07-26 18:17:48 +00:00
< h4 > Pills< / h4 >
< label > @nav-pills-active-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@fff" data-var = "@nav-pills-active-link-hover-color" >
2013-07-26 18:17:48 +00:00
< label > @nav-pills-active-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@component-active-bg" data-var = "@nav-pills-active-link-hover-bg" >
2013-07-26 18:17:48 +00:00
< / div >
< div class = "col-lg-6" >
2013-07-26 18:11:09 +00:00
< h4 > Tabs< / h4 >
< label > @nav-tabs-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@ddd" data-var = "@nav-tabs-border-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-link-hover-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@nav-tabs-link-hover-border-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-active-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray" data-var = "@nav-tabs-active-link-hover-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-active-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@body-bg" data-var = "@nav-tabs-active-link-hover-bg" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-active-link-hover-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@nav-tabs-active-link-hover-border-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-justified-link-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@nav-tabs-justified-link-border-color" >
2013-07-26 18:11:09 +00:00
< label > @nav-tabs-justified-active-link-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@body-bg" data-var = "@nav-tabs-justified-active-link-border-color" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-24 06:25:46 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-tables" > Tables< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @table-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "transparent" data-var = "@table-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default background color used for all tables.< / p >
< label > @table-bg-accent< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f9f9f9" data-var = "@table-bg-accent" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color used for < code > .table-striped< / code > .< / p >
< / div >
< div class = "col-lg-6" >
< label > @table-bg-hover< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@table-bg-hover" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color used for < code > .table-hover< / code > .< / p >
< label > @table-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@table-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Border color for table and cell borders.< / p >
< / div >
< / div >
2013-07-24 06:25:46 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-forms" > Forms< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< h3 > Inputs< / h3 >
2013-08-12 03:33:58 +00:00
< label > @input-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray" data-var = "@input-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Text color for < code > < input> < / code > s< / p >
2013-07-26 18:11:09 +00:00
< label > @input-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@input-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > < code > < input> < / code > background color< / p >
< label > @input-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@input-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > < code > < input> < / code > border color< / p >
< label > @input-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@input-border-radius" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > < code > < input> < / code > border radius< / p >
< label > @input-bg-disabled< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@input-bg-disabled" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > < code > < input disabled> < / code > background color< / p >
< / div >
< div class = "col-lg-6" >
< h3 > Placeholder< / h3 >
< label > @input-color-placeholder< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@input-color-placeholder" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Placeholder text color< / p >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Legend< / h3 >
2013-08-12 03:33:58 +00:00
< label > @legend-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray" data-var = "@legend-color" >
2013-07-26 18:11:09 +00:00
< label > @legend-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#e5e5e5" data-var = "@legend-border-color" >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Input groups< / h3 >
2013-08-12 03:33:58 +00:00
< label > @input-group-addon-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@input-group-addon-bg" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Background color for textual input addons< / p >
2013-07-26 18:11:09 +00:00
< label > @input-group-addon-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@input-border" data-var = "@input-group-addon-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Border color for textual input addons< / p >
< / div >
< / div >
< h2 id = "variables-dropdowns" > Dropdowns< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< h3 > Dropdown menu< / h3 >
< label > @dropdown-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@dropdown-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown menu background color< / p >
< label > @dropdown-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.15)" data-var = "@dropdown-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown menu border color< / p >
< label > @dropdown-fallback-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@dropdown-fallback-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown menu border color < strong > for IE8< / strong > < / p >
< label > @dropdown-caret-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@dropdown-caret-color" data-var = "@dropdown-caret-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Indicator arrow for showing an element has a dropdown< / p >
< label > @dropdown-divider-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#e5e5e5" data-var = "@dropdown-divider-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown divider top border color< / p >
2013-08-12 03:33:58 +00:00
< label > @dropdown-header-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@dropdown-header-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Text color for headers within dropdown menus< / p >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< h3 > Dropdown items< / h3 >
< label > @dropdown-link-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-dark" data-var = "@dropdown-link-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Dropdown text color< / p >
2013-08-12 03:33:58 +00:00
< label > @dropdown-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@dropdown-link-hover-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Hovered dropdown menu entry text color< / p >
2013-07-26 18:11:09 +00:00
< label > @dropdown-link-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@dropdown-link-hover-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Hovered dropdown menu entry text color< / p >
2013-08-12 03:33:58 +00:00
< label > @dropdown-link-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@dropdown-link-active-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Active dropdown menu entry text color< / p >
2013-07-26 18:11:09 +00:00
< label > @dropdown-link-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@component-active-bg" data-var = "@dropdown-link-active-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Active dropdown menu entry background color< / p >
2013-08-12 03:33:58 +00:00
< label > @dropdown-link-disabled-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@dropdown-link-disabled-color" data-var = "@dropdown-link-disabled-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Disabled dropdown menu entry background color< / p >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-panels-wells" > Panels and wells< / h2 >
2013-08-19 03:08:03 +00:00
< h3 > Common panel styles< / h3 >
2013-07-26 18:11:09 +00:00
< div class = "row" >
< div class = "col-lg-6" >
< label > @panel-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@panel-bg" >
2013-08-19 03:08:03 +00:00
< label > @panel-inner-border< / label >
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@panel-inner-border" >
< p class = "help-block" > Border color for elements within panels< / p >
2013-07-26 18:11:09 +00:00
< / div >
< div class = "col-lg-6" >
< label > @panel-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@panel-border-radius" >
2013-08-19 03:08:03 +00:00
< label > @panel-footer-bg< / label >
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@panel-footer-bg" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
< h3 > Contextual panel colors< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
2013-08-19 03:08:03 +00:00
< h4 > Default< / h4 >
< label > @panel-default-text< / label >
< input type = "text" class = "form-control" placeholder = "@gray-dark" data-var = "@panel-default-text" >
< label > @panel-default-border< / label >
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@panel-default-border" >
< label > @panel-default-heading-bg< / label >
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@panel-default-heading-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Primary< / h4 >
< label > @panel-primary-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@panel-primary-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-primary-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@panel-primary-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-primary-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@panel-primary-heading-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Success< / h4 >
< label > @panel-success-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-text" data-var = "@panel-success-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-success-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-border" data-var = "@panel-success-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-success-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-success-bg" data-var = "@panel-success-heading-bg" >
2013-08-19 03:08:03 +00:00
< / div >
< div class = "col-lg-6" >
2013-07-26 18:11:09 +00:00
< h4 > Info< / h4 >
< label > @panel-info-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-text" data-var = "@panel-info-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-info-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-border" data-var = "@panel-info-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-info-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-info-bg" data-var = "@panel-info-heading-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Warning< / h4 >
< label > @panel-warning-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-text" data-var = "@panel-warning-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-warning-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-border" data-var = "@panel-warning-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-warning-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-warning-bg" data-var = "@panel-warning-heading-bg" >
2013-07-26 18:11:09 +00:00
< h4 > Danger< / h4 >
< label > @panel-danger-text< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-text" data-var = "@panel-danger-text" >
2013-07-26 18:11:09 +00:00
< label > @panel-danger-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-border" data-var = "@panel-danger-border" >
2013-07-26 18:11:09 +00:00
< label > @panel-danger-heading-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@state-danger-bg" data-var = "@panel-danger-heading-bg" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-05-24 04:34:32 +00:00
2013-07-26 18:11:09 +00:00
< h3 > Wells< / h3 >
< label > @well-bg< / label >
2013-08-19 04:29:46 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@well-bg" >
2013-07-20 07:03:08 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-accordion" > Accordion< / h2 >
< label > @accordion-border-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#e5e5e5" data-var = "@accordion-border-bg" >
2013-07-20 07:03:08 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-badges" > Badges< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @badge-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@badge-color" >
2013-07-26 18:11:09 +00:00
< p > Badge text color< / p >
< label > @badge-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@badge-bg" >
2013-07-26 18:11:09 +00:00
< p > Badge background color< / p >
< label > @badge-link-hover-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@badge-link-hover-color" >
2013-07-26 18:11:09 +00:00
< p > Linked badge text color on hover< / p >
< / div >
< div class = "col-lg-6" >
< label > @badge-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@link-color" data-var = "@badge-active-color" >
2013-07-26 18:11:09 +00:00
< p > Badge text color in active nav link< / p >
< label > @badge-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@badge-active-bg" >
2013-07-26 18:11:09 +00:00
< p > Badge text color in active nav link< / p >
< / div >
< / div >
2013-07-20 07:03:08 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-breadcrumbs" > Breadcrumbs< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @breadcrumb-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@breadcrumb-color" >
2013-07-26 18:11:09 +00:00
< p > Breadcrumb text color< / p >
< / div >
< div class = "col-lg-4" >
< label > @breadcrumb-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@breadcrumb-bg" >
2013-07-26 18:11:09 +00:00
< p > Breadcrumb background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @breadcrumb-active-color< / label >
2013-08-18 03:28:58 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@breadcrumb-active-color" >
2013-07-26 18:11:09 +00:00
< p > Text color of current page in the breadcrumb< / p >
< / div >
< / div >
2013-07-24 06:03:57 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-jumbotron" > Jumbotron< / h2 >
< div class = "row" >
2013-08-19 15:46:49 +00:00
< div class = "col-lg-3" >
< label > @jumbotron-padding< / label >
< input type = "text" class = "form-control" placeholder = "30px" data-var = "@jumbotron-padding" >
< / div >
< div class = "col-lg-3" >
2013-07-26 18:11:09 +00:00
< label > @jumbotron-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@jumbotron-bg" >
2013-07-26 18:11:09 +00:00
< / div >
2013-08-19 15:46:49 +00:00
< div class = "col-lg-3" >
< label > @jumbotron-color< / label >
< input type = "text" class = "form-control" placeholder = "inherit" data-var = "@jumbotron-color" >
< / div >
< div class = "col-lg-3" >
2013-07-26 18:11:09 +00:00
< label > @jumbotron-heading-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "inherit" data-var = "@jumbotron-heading-color" >
2013-07-26 18:11:09 +00:00
< / div >
< / div >
2013-07-24 06:03:57 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-modals" > Modals< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @modal-inner-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "20px" data-var = "@modal-inner-padding" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Padding applied to the modal body< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-title-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "15px" data-var = "@modal-title-padding" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Padding applied to the modal title< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-title-line-height< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@line-height-base" data-var = "@modal-title-line-height" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal title line-height< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-content-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@modal-content-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color of modal content area< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-content-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.2)" data-var = "@modal-content-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal content border color< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-content-fallback-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#999" data-var = "@modal-content-fallback-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal content border color < strong > for IE8< / strong > < / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-backdrop-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#000" data-var = "@modal-backdrop-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal backdrop background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-header-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#e5e5e5" data-var = "@modal-header-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal header border color< / p >
< / div >
< div class = "col-lg-4" >
< label > @modal-footer-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@modal-header-border-color" data-var = "@modal-footer-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Modal footer border color< / p >
< / div >
< / div >
< h2 id = "variables-carousel" > Carousel< / h2 >
< label > @carousel-text-shadow< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "0 1px 2px rgba(0,0,0,.6)" data-var = "@carousel-text-shadow" >
2013-07-26 18:11:09 +00:00
< label > @carousel-control-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@carousel-control-color" >
2013-07-26 18:11:09 +00:00
< label > @carousel-indicator-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@carousel-indicator-border-color" >
2013-07-26 18:11:09 +00:00
< label > @carousel-indicator-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@carousel-indicator-active-bg" >
2013-07-26 18:11:09 +00:00
< label > @carousel-caption-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@carousel-caption-color" >
2013-07-26 18:11:09 +00:00
< h2 id = "variables-list-group" > List group< / h2 >
< h3 > Background< / h3 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @list-group-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@list-group-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @list-group-hover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@list-group-hover-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color of single list elements on hover< / p >
< / div >
< div class = "col-lg-4" >
< label > @list-group-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@component-active-bg" data-var = "@list-group-active-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color of active list elements< / p >
< / div >
< / div >
< h3 > Borders< / h3 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @list-group-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@list-group-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default border color< / p >
< / div >
< div class = "col-lg-4" >
< label > @list-group-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@list-group-border-radius" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > List group border radius< / p >
< / div >
< div class = "col-lg-4" >
< label > @list-group-active-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@list-group-active-bg" data-var = "@list-group-active-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Border color of active list elements< / p >
< / div >
< / div >
< label > @list-group-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@list-group-active-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Text color of active list elements< / p >
< h2 id = "variables-thumbnails" > Thumbnails< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
2013-08-12 03:33:58 +00:00
< label > @thumbnail-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "4px" data-var = "@thumbnail-padding" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Padding around the thumbnail image< / p >
2013-07-26 18:11:09 +00:00
< label > @thumbnail-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@body-bg" data-var = "@thumbnail-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Thumbnail background color< / p >
< label > @thumbnail-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@thumbnail-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Thumbnail border color< / p >
< label > @thumbnail-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@border-radius-base" data-var = "@thumbnail-border-radius" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Thumbnail border radius< / p >
< / div >
2013-08-12 03:33:58 +00:00
< div class = "col-lg-6" >
< label > @thumbnail-caption-padding< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@text-color" data-var = "@thumbnail-caption-padding" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Padding around the thumbnail caption< / p >
< label > @thumbnail-caption-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@text-color" data-var = "@thumbnail-caption-color" >
2013-08-12 03:33:58 +00:00
< p class = "help-block" > Custom text color for thumbnail captions< / p >
< / div >
2013-07-26 18:11:09 +00:00
< / div >
< h2 id = "variables-progress" > Progress bars< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @progress-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#f5f5f5" data-var = "@progress-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color of the whole progress component< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@progress-bar-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Default progress bar color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-success" data-var = "@progress-bar-success-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Success progress bar color< / p >
< / div >
< / div >
< div class = "row" >
< div class = "col-lg-4" >
< label > @progress-bar-warning-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-warning" data-var = "@progress-bar-warning-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Warning progress bar color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-danger" data-var = "@progress-bar-danger-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Danger progress bar color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-info" data-var = "@progress-bar-info-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Info progress bar color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@progress-bar-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Info progress bar text color< / p >
< / div >
< div class = "col-lg-4" >
< label > @progress-bar-text-shadow< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "0 -1px 0 rgba(0,0,0,.25)" data-var = "@progress-bar-text-shadow" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Info progress bar text shadow< / p >
< / div >
< / div >
< h2 id = "variables-pagination" > Pagination< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @pagination-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@pagination-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @pagination-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ddd" data-var = "@pagination-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Border color< / p >
< / div >
< div class = "col-lg-4" >
< label > @pagination-active-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@pagination-active-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Active background color< / p >
< / div >
< div class = "col-lg-4" >
< label > @pagination-active-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@pagination-active-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Active text color< / p >
< / div >
< div class = "col-lg-4" >
< label > @pagination-disabled-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@pagination-disabled-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Disabled text color< / p >
< / div >
< / div >
< h2 id = "variables-pager" > Pager< / h2 >
< div class = "row" >
< div class = "col-lg-4" >
< label > @pager-border-radius< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "15px" data-var = "@pager-border-radius" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Pager border radius< / p >
< / div >
< div class = "col-lg-4" >
< label > @pager-disabled-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@pager-disabled-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Pager disabled state color< / p >
< / div >
< / div >
2013-07-24 06:03:57 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-labels" > Labels< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
2013-08-15 18:31:26 +00:00
< label > @label-default-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@label-default-bg" >
2013-08-15 18:31:26 +00:00
< p class = "help-block" > Default label background color< / p >
< label > @label-primary-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-primary" data-var = "@label-primary-bg" >
2013-08-15 18:31:26 +00:00
< p class = "help-block" > Primary label background color< / p >
2013-07-26 18:11:09 +00:00
< label > @label-success-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-success" data-var = "@label-success-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Success label background color< / p >
2013-08-15 18:31:26 +00:00
< / div >
< div class = "col-lg-6" >
2013-07-26 18:11:09 +00:00
< label > @label-info-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-info" data-var = "@label-info-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Info label background color< / p >
< label > @label-warning-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-warning" data-var = "@label-warning-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Warning label background color< / p >
< label > @label-danger-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@brand-danger" data-var = "@label-danger-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Danger label background color< / p >
< / div >
< / div >
< h2 id = "variables-tooltips-popovers" > Tooltips and popovers< / h2 >
< h3 > Tooltip styles< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @tooltip-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@tooltip-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip text color< / p >
< label > @tooltip-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.9)" data-var = "@tooltip-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip background color< / p >
< / div >
< div class = "col-lg-6" >
< label > @tooltip-arrow-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "5px" data-var = "@tooltip-arrow-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip arrow width< / p >
< label > @tooltip-arrow-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@tooltip-bg" data-var = "@tooltip-arrow-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip arrow color< / p >
< / div >
< div class = "col-lg-6" >
< label > @tooltip-max-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "200px" data-var = "@tooltip-max-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Tooltip max width< / p >
< / div >
< / div >
< h3 > Popover styles< / h3 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @popover-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@popover-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover body background color< / p >
< label > @popover-title-bg< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "darken(@popover-bg, 3%)" data-var = "@popover-title-bg" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover title background color< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-arrow-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "10px" data-var = "@popover-arrow-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover arrow width< / p >
< label > @popover-arrow-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#fff" data-var = "@popover-arrow-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover arrow color< / p >
< / div >
< / div >
< div class = "row" >
< div class = "col-lg-6" >
< label > @popover-arrow-outer-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "(@popover-arrow-width 1)" data-var = "@popover-arrow-outer-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover outer arrow width< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-arrow-outer-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.25)" data-var = "@popover-arrow-outer-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover outer arrow color< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-arrow-outer-fallback-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#999" data-var = "@popover-arrow-outer-fallback-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover outer arrow fallback color< / p >
< / div >
< / div >
< div class = "row" >
< div class = "col-lg-6" >
< label > @popover-max-width< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "276px" data-var = "@popover-max-width" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover maximum width< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "rgba(0,0,0,.2)" data-var = "@popover-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover border color< / p >
< / div >
< div class = "col-lg-6" >
< label > @popover-fallback-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#ccc" data-var = "@popover-fallback-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Popover fallback border color< / p >
< / div >
< / div >
2013-07-24 06:09:06 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-close" > Close button< / h2 >
2013-07-26 18:17:48 +00:00
< div class = "row" >
< div class = "col-lg-6" >
< label > @close-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "#000" data-var = "@close-color" >
2013-07-26 18:17:48 +00:00
< / div >
< div class = "col-lg-6" >
< label > @close-text-shadow< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "0 1px 0 #fff" data-var = "@close-text-shadow" >
2013-07-26 18:17:48 +00:00
< / div >
< / div >
2013-07-24 06:09:06 +00:00
2013-07-26 18:11:09 +00:00
< h2 id = "variables-type" > Type< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @text-muted< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@text-muted" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Text muted color< / p >
< / div >
< div class = "col-lg-6" >
< label > @abbr-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@abbr-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Abbreviations and acronyms border color< / p >
< / div >
< div class = "col-lg-6" >
< label > @headings-small-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@headings-small-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Headings small color< / p >
< / div >
< div class = "col-lg-6" >
< label > @blockquote-small-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-light" data-var = "@blockquote-small-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Blockquote small color< / p >
< / div >
< div class = "col-lg-6" >
< label > @blockquote-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@blockquote-border-color" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Blockquote border color< / p >
< / div >
< div class = "col-lg-6" >
< label > @page-header-border-color< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@page-header-border-color" >
2013-08-19 04:43:14 +00:00
< p class = "help-block" > Page header border color< / p >
2013-07-26 18:11:09 +00:00
< / div >
2013-05-09 04:56:08 +00:00
< / div >
2013-07-26 18:11:09 +00:00
< h2 id = "variables-other" > Other< / h2 >
< div class = "row" >
< div class = "col-lg-6" >
< label > @hr-border< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "@gray-lighter" data-var = "@hr-border" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Horizontal line color< / p >
< / div >
< div class = "col-lg-6" >
< label > @component-offset-horizontal< / label >
2013-08-18 01:41:36 +00:00
< input type = "text" class = "form-control" placeholder = "180px" data-var = "@component-offset-horizontal" >
2013-07-26 18:11:09 +00:00
< p class = "help-block" > Horizontal offset for forms and lists< / p >
< / div >
< / div >
< / div >
2013-04-01 07:11:47 +00:00
2013-07-27 02:38:12 +00:00
< div class = "bs-docs-section" >
2013-07-26 18:11:09 +00:00
< div class = "page-header" >
2013-07-27 02:38:12 +00:00
< h1 id = "download" > Download< / h1 >
2013-07-26 18:11:09 +00:00
< / div >
< p class = "lead" > Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.< / p >
< div class = "bs-customize-download" >
2013-08-19 04:02:52 +00:00
< 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 >
2013-07-26 18:11:09 +00:00
< / div >
< / div > <!-- /download -->
2013-08-19 21:16:52 +00:00
< / form >