-
-
Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.
-
-
Basics
-
-
Body background
-
-
-
-
-
Background color applied to <body>.
-
-
-
-
Typography
-
-
-
-
-
Default sans-serif fonts.
-
-
-
Default serif fonts.
-
-
-
Default monospace fonts for <code> and <pre>.
-
-
-
-
-
Used to globally set font-family in Bootstrap.
-
-
-
Used to calculate font-size throughout Bootstrap.
-
-
-
Used to calculate line-height throughout Bootstrap.
-
-
-
-
Code blocks
-
-
-
Headings
-
-
-
-
-
Choose a separate font-family for headings.
-
-
-
Choose a separate font-weight for headings.
-
-
-
-
-
Choose a separate line-height for headings.
-
-
-
-
Colors
-
-
-
Define custom colors used in several contexts.
-
-
-
Used for primary buttons, panels and more.
-
-
-
Used to indicate success.
-
-
-
Used to indicate a warning.
-
-
-
Used to indicate danger.
-
-
-
Used to indicate informational content.
-
-
-
Define your preferred colors for standard text and links.
-
-
-
Global color set on the body.
-
-
-
Global link color for text.
-
-
-
Automatically darken links on hover via color function.
-
-
-
-
Media queries breakpoints
-
Define the breakpoints at which your layout will change, adapting to different screen sizes.
-
-
-
Container sizes
-
Define the maximum width of .container for different screen sizes.
-
-
-
-
-
For @screen-small and up.
-
-
-
For @screen-medium and up.
-
-
-
-
-
For @screen-large and up.
-
-
-
-
Grid system
-
Define your custom responsive grid.
-
-
-
-
-
Number of columns in the grid.
-
-
-
Padding between columns.
-
-
-
-
-
Point at which the navbar stops collapsing.
-
-
-
-
Components
-
Define common padding and border radius sizes and more.
-
-
-
-
For each of Bootstrap's buttons, define text, background and border color.
-
-
-
-
Define colors for form feedback states and, by default, alerts.
-
-
-
Alerts
-
Define alert colors and border radius.
-
Border radius
-
-
-
-
-
Navbar
-
-
Nav
-
Default nav
-
-
-
Tables
-
-
-
-
-
Default background color used for all tables.
-
-
-
Background color used for .table-striped.
-
-
-
-
-
Background color used for .table-hover.
-
-
-
Border color for table and cell borders.
-
-
-
-
-
-
Inputs
-
-
-
<input> background color
-
-
-
<input> border color
-
+
+
+
Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.
+
+
Basics
+
+
Body background
+
+
+
+
+
Background color applied to <body>.
+
+
+
+
Typography
+
+
+
+
+
Default sans-serif fonts.
+
+
+
Default serif fonts.
+
+
+
Default monospace fonts for <code> and <pre>.
+
+
+
+
+
Used to globally set font-family in Bootstrap.
+
+
+
Used to calculate font-size throughout Bootstrap.
+
+
+
Used to calculate line-height throughout Bootstrap.
+
+
+
Used to globally set font-weight in Bootstrap
+
+
+
+
Code blocks
+
+
+
Headings
+
+
+
+
+
Choose a separate font-family for headings.
+
+
+
Choose a separate font-weight for headings.
+
+
+
+
+
Choose a separate line-height for headings.
+
+
+
+
Colors
+
+
+
Define custom colors used in several contexts.
+
+
+
Used for primary buttons, panels and more.
+
+
+
Used to indicate success.
+
+
+
Used to indicate a warning.
+
+
+
Used to indicate danger.
+
+
+
Used to indicate informational content.
+
+
+
Define your preferred colors for standard text and links.
+
+
+
Global color set on the body.
+
+
+
Global link color for text.
+
+
+
Automatically darken links on hover via color function.
+
+
+
+
Media queries breakpoints
+
Define the breakpoints at which your layout will change, adapting to different screen sizes.
+
+
+
Container sizes
+
Define the maximum width of .container for different screen sizes.
+
+
+
+
+
For @screen-small and up.
+
+
+
For @screen-medium and up.
+
+
+
+
+
For @screen-large and up.
+
+
+
+
Grid system
+
Define your custom responsive grid.
+
+
+
+
+
Number of columns in the grid.
+
+
+
Padding between columns.
+
+
+
+
+
Point at which the navbar stops collapsing.
+
+
+
+
Components
+
Define common padding and border radius sizes and more.
+
+
+
+
For each of Bootstrap's buttons, define text, background and border color.
+
+
+
+
Define colors for form feedback states and, by default, alerts.
+
+
+
Alerts
+
Define alert colors and border radius.
+
Border radius
+
-
<input> border radius
-
-
-
<input disabled> background color
-
-
-
Placeholder
-
-
-
Placeholder text color
+
-
Legend
-
+
Navbar
+
+
+
+
Nav
+
+
Default nav
+
+
+
+
Tables
+
+
+
+
+
Default background color used for all tables.
+
+
+
Background color used for .table-striped.
+
+
+
+
+
Background color used for .table-hover.
+
+
+
Border color for table and cell borders.
+
+
+
+
+
+
+
Inputs
+
+
+
<input> background color
+
+
+
<input> border color
+
+
+
<input> border radius
+
+
+
<input disabled> background color
+
+
+
Placeholder
+
+
+
Placeholder text color
+
+
Legend
+
+
+
<legend> border color
+
+
Input groups
+
+
+
Border color for textual input addons
+
+
+
+
Dropdowns
+
+
+
Dropdown menu
+
+
+
Dropdown menu background color
+
+
+
Dropdown menu border color
+
+
+
Dropdown menu border color for IE8
+
+
+
Indicator arrow for showing an element has a dropdown
+
+
+
Dropdown divider top border color
+
+
+
Dropdown items
+
+
+
Dropdown text color
+
+
+
Active dropdown menu entry text color
+
+
+
Hovered dropdown menu entry text color
+
+
+
Active dropdown menu entry background color
+
+
+
Hovered dropdown menu entry background color
+
+
+
+
Panels and wells
+
Default panel styles
+
+
+
+
+
Panel body background color
+
+
+
Panel heading background color
+
+
+
Panel footer background color
+
+
+
+
+
Panel border color
+
+
+
Panel border radius
+
+
+
Contextual panel colors
+
+
+
Primary
+
+
+
Primary text color
+
+
+
Primary border color
+
+
+
Primary heading background color
+
Success
+
+
+
Success text color
+
+
+
Success border color
+
+
+
Success heading background color
+
Info
+
+
+
Info text color
+
+
+
Info border color
+
+
+
Info heading background color
+
+
+
Warning
+
+
+
Warning text color
+
+
+
Warning border color
+
+
+
Warning heading background color
+
Danger
+
+
+
Danger text color
+
+
+
Danger border color
+
+
+
Danger heading background color
+
+
+
+
Wells
+
+
+
+
Accordion
+
-
<legend> border color
-
Input groups
-
-
-
Border color for textual input addons
-
+
Badges
+
+
+
+
+
Badge text color
+
+
+
Badge background color
+
+
+
Linked badge text color on hover
+
+
+
+
+
Badge text color in active nav link
+
+
+
Badge text color in active nav link
+
+
+
+
+
Badge font weight
+
+
+
Badge line height
+
+
+
Badge border radius
+
+
+
+
Breadcrumbs
+
+
+
+
+
Breadcrumb text color
+
+
+
+
+
Breadcrumb background color
+
+
+
+
+
Text color of current page in the breadcrumb
+
+
+
+
Jumbotron
+
+
+
+
+
Jumbotron background color
+
+
+
+
+
Jumbotron heading color
+
+
+
+
+
Jumbotron lead paragraph color
+
+
+
+
Modals
+
+
+
+
+
Padding applied to the modal body
+
+
+
+
+
Padding applied to the modal title
+
+
+
+
+
Modal title line-height
+
+
+
+
+
Background color of modal content area
+
+
+
+
+
Modal content border color
+
+
+
+
+
Modal content border color for IE8
+
+
+
+
+
Modal backdrop background color
+
+
+
+
+
Modal header border color
+
+
+
+
+
Modal footer border color
+
+
+
+
Carousel
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
List group
+
Background
+
+
+
+
+
Default background color
+
+
+
+
+
Background color of single list elements on hover
+
+
+
+
+
Background color of active list elements
+
+
+
Borders
+
+
+
+
+
Default border color
+
+
+
+
+
List group border radius
+
+
+
+
+
Border color of active list elements
+
+
+
+
+
Text color of active list elements
+
Thumbnails
+
+
+
+
+
Custom text color for thumbnail captions
+
+
+
Thumbnail background color
+
+
+
+
+
Thumbnail border color
+
+
+
Thumbnail border radius
+
+
+
Progress bars
+
+
+
+
+
Background color of the whole progress component
+
+
+
+
+
Default progress bar color
+
+
+
+
+
Success progress bar color
+
+
+
+
+
+
+
Warning progress bar color
+
+
+
+
+
Danger progress bar color
+
+
+
+
+
Info progress bar color
+
+
+
+
+
Info progress bar text color
+
+
+
+
+
Info progress bar text shadow
+
+
+
+
+
+
+
+
Background color
+
+
+
+
+
Border color
+
+
+
+
+
Active background color
+
+
+
+
+
Active text color
+
+
+
+
+
Disabled text color
+
+
+
+
+
+
+
+
Pager border radius
+
+
+
+
+
Pager disabled state color
+
+
+
+
Labels
+
+
+
+
+
Success label background color
+
+
+
Info label background color
+
+
+
+
+
Warning label background color
+
+
+
Danger label background color
+
+
+
+
Tooltip styles
+
+
+
+
+
Tooltip text color
+
+
+
Tooltip background color
+
+
+
+
+
Tooltip arrow width
+
+
+
Tooltip arrow color
+
+
+
+
+
Tooltip max width
+
+
+
Popover styles
+
+
+
+
+
Popover body background color
+
+
+
Popover title background color
+
+
+
+
+
Popover arrow width
+
+
+
Popover arrow color
+
+
+
+
+
+
+
Popover outer arrow width
+
+
+
+
+
Popover outer arrow color
+
+
+
+
+
Popover outer arrow fallback color
+
+
+
+
+
+
+
Popover maximum width
+
+
+
+
+
Popover border color
+
+
+
+
+
Popover fallback border color
+
+
+
+
Close button
+
+
+
Type
+
+
+
+
+
Text muted color
+
+
+
+
+
Abbreviations and acronyms border color
+
+
+
+
+
Headings small color
+
+
+
+
+
Blockquote small color
+
+
+
+
+
Blockquote border color
+
+
+
+
+
Pag header border color
+
+
+
Other
+
+
+
+
+
Horizontal line color
+
+
+
+
+
Horizontal offset for forms and lists
+
+
-
Dropdowns
-
-
-
Dropdown menu
-
-
-
Dropdown menu background color
-
-
-
Dropdown menu border color
-
-
-
Dropdown menu border color for IE8
-
-
-
Indicator arrow for showing an element has a dropdown
-
-
-
Dropdown divider top border color
-
-
-
Dropdown items
-
-
-
Dropdown text color
-
-
-
Active dropdown menu entry text color
-
-
-
Hovered dropdown menu entry text color
-
-
-
Active dropdown menu entry background color
-
-
-
Hovered dropdown menu entry background color
-
-
-
-
Panels and wells
-
Default panel styles
-
-
-
-
-
Panel body background color
-
-
-
Panel heading background color
-
-
-
Panel footer background color
-
-
-
-
-
Panel border color
-
-
-
Panel border radius
-
-
-
Contextual panel colors
-
-
-
Primary
-
-
-
Primary text color
-
-
-
Primary border color
-
-
-
Primary heading background color
-
Success
-
-
-
Success text color
-
-
-
Success border color
-
-
-
Success heading background color
-
Info
-
-
-
Info text color
-
-
-
Info border color
-
-
-
Info heading background color
-
-
-
Warning
-
-
-
Warning text color
-
-
-
Warning border color
-
-
-
Warning heading background color
-
Danger
-
-
-
Danger text color
-
-
-
Danger border color
-
-
-
Danger heading background color
-
-
-
-
Wells
-
-
-
-
Accordion
-
-
-
-
Badges
-
-
-
-
-
Badge text color
-
-
-
Badge background color
-
-
-
Linked badge text color on hover
-
-
-
-
-
Badge text color in active nav link
-
-
-
Badge text color in active nav link
-
-
-
-
Breadcrumbs
-
-
-
-
-
Breadcrumb text color
-
-
-
-
-
Breadcrumb background color
-
-
-
-
-
Text color of current page in the breadcrumb
-
-
-
-
Jumbotron
-
-
-
-
-
Jumbotron background color
-
-
-
-
-
Jumbotron heading color
-
-
-
-
-
Jumbotron lead paragraph color
-
-
-
-
Modals
-
-
-
-
-
Padding applied to the modal body
-
-
-
-
-
Padding applied to the modal title
-
-
-
-
-
Modal title line-height
-
-
-
-
-
Background color of modal content area
-
-
-
-
-
Modal content border color
-
-
-
-
-
Modal content border color for IE8
-
-
-
-
-
Modal backdrop background color
-
-
-
-
-
Modal header border color
-
-
-
-
-
Modal footer border color
-
-
-
-
Carousel
-
-
-
-
-
-
-
-
-
-
-
-
List group
-
Background
-
-
-
-
-
Default background color
-
-
-
-
-
Background color of single list elements on hover
-
-
-
-
-
Background color of active list elements
-
-
-
Borders
-
-
-
-
-
Default border color
-
-
-
-
-
List group border radius
-
-
-
-
-
Border color of active list elements
-
-
-
-
-
Text color of active list elements
-
Thumbnails
-
-
-
-
-
Custom text color for thumbnail captions
-
-
-
Thumbnail background color
-
-
-
-
-
Thumbnail border color
-
-
-
Thumbnail border radius
-
-
-
Progress bars
-
-
-
-
-
Background color of the whole progress component
-
-
-
-
-
Default progress bar color
-
-
-
-
-
Success progress bar color
-
-
-
-
-
-
-
Warning progress bar color
-
-
-
-
-
Danger progress bar color
-
-
-
-
-
Info progress bar color
-
-
-
-
-
Info progress bar text color
-
-
-
-
-
Info progress bar text shadow
-
-
-
-
-
-
-
-
Background color
-
-
-
-
-
Border color
-
-
-
-
-
Active background color
-
-
-
-
-
Active text color
-
-
-
-
-
Disabled text color
-
-
-
-
-
-
-
-
Pager border radius
-
-
-
-
-
Pager disabled state color
-
-
-
-
Labels
-
-
-
-
-
Success label background color
-
-
-
Info label background color
-
-
-
-
-
Warning label background color
-
-
-
Danger label background color
-
-
-
-
Tooltip styles
-
-
-
-
-
Tooltip text color
-
-
-
Tooltip background color
-
-
-
-
-
Tooltip arrow width
-
-
-
Tooltip arrow color
-
-
-
-
-
Tooltip max width
-
-
-
Popover styles
-
-
-
-
-
Popover body background color
-
-
-
Popover title background color
-
-
-
-
-
Popover arrow width
-
-
-
Popover arrow color
-
-
-
-
-
-
-
Popover outer arrow width
-
-
-
-
-
Popover outer arrow color
-
-
-
-
-
Popover outer arrow fallback color
-
-
-
-
-
-
-
Popover maximum width
-
-
-
-
-
Popover border color
-
-
-
-
-
Popover fallback border color
-
-
-
-
Close button
-
-
-
Type
-
-
-
-
-
Text muted color
-
-
-
-
-
Abbreviations and acronyms border color
-
-
-
-
-
Headings small color
-
-
-
-
-
Blockquote small color
-
-
-
-
-
Blockquote border color
-
-
-
-
-
Pag header border color
-
-
-
Other
-
-
-
-
-
Horizontal line color
-
-
-
-
-
Horizontal offset for forms and lists
-
-
-
-
-
-
-
Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.
-
-
-
What's included?
-
Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.
-
-
+
+
+
Hooray! Your custom version of Bootstrap is now ready to be compiled. Just click the button below to finish the process.
+
+
+
What's included?
+
Downloads include compiled CSS, compiled and minified CSS, and compiled jQuery plugins, all nicely packed up into a zipball for your convenience.
+
+
diff --git a/less/alerts.less b/less/alerts.less
index 66aa6cf246..02ca8a201c 100644
--- a/less/alerts.less
+++ b/less/alerts.less
@@ -26,7 +26,7 @@
}
// Provide class for links that match alerts
.alert-link {
- font-weight: 500;
+ font-weight: @alert-link-font-weight;
color: darken(@alert-text, 10%);
}
diff --git a/less/badges.less b/less/badges.less
index 216d6014b9..6e7ae08f97 100644
--- a/less/badges.less
+++ b/less/badges.less
@@ -9,14 +9,14 @@
min-width: 10px;
padding: 3px 7px;
font-size: @font-size-small;
- font-weight: bold;
+ font-weight: @badge-font-weight;
color: @badge-color;
- line-height: 1;
+ line-height: @badge-line-height;
vertical-align: middle;
white-space: nowrap;
text-align: center;
background-color: @badge-bg;
- border-radius: 10px;
+ border-radius: @badge-border-radius;
// Empty labels/badges collapse
&:empty {
diff --git a/less/button-groups.less b/less/button-groups.less
index f345f4e138..9fe96df921 100644
--- a/less/button-groups.less
+++ b/less/button-groups.less
@@ -117,11 +117,11 @@
}
// Carets in other button sizes
.btn-large .caret {
- border-width: 5px;
+ border-width: @btn-large-caret-border-width;
}
// Upside down carets for .dropup
.dropup .btn-large .caret {
- border-bottom-width: 5px;
+ border-bottom-width: @btn-large-caret-border-width;
}
diff --git a/less/buttons.less b/less/buttons.less
index b8bbfc6cfe..9d62895186 100644
--- a/less/buttons.less
+++ b/less/buttons.less
@@ -12,7 +12,7 @@
padding: @padding-base-vertical @padding-base-horizontal;
margin-bottom: 0; // For input.btn
font-size: @font-size-base;
- font-weight: 500;
+ font-weight: @font-weight-base;
line-height: @line-height-base;
text-align: center;
vertical-align: middle;
@@ -109,7 +109,7 @@
fieldset[disabled] & {
&:hover,
&:focus {
- color: @gray-dark;
+ color: @btn-link-disabled-color;
text-decoration: none;
}
}
@@ -127,7 +127,7 @@
.btn-small {
padding: @padding-small-vertical @padding-small-horizontal;
font-size: @font-size-small;
- line-height: 1.5; // ensure proper height of button next to small input
+ line-height: @btn-small-line-height; // ensure proper height of button next to small input
border-radius: @border-radius-small;
}
diff --git a/less/carousel.less b/less/carousel.less
index 3526089c28..98ce5916b9 100644
--- a/less/carousel.less
+++ b/less/carousel.less
@@ -69,9 +69,9 @@
top: 0;
left: 0;
bottom: 0;
- width: 15%;
- .opacity(.5);
- font-size: 20px;
+ width: @carousel-control-width;
+ .opacity(@carousel-control-opacity);
+ font-size: @carousel-control-font-size;
color: @carousel-control-color;
text-align: center;
text-shadow: @carousel-text-shadow;
@@ -133,7 +133,7 @@
bottom: 10px;
left: 50%;
z-index: 15;
- width: 120px;
+ width: @carousel-indicators-width;
margin-left: -60px;
padding-left: 0;
list-style: none;
diff --git a/less/close.less b/less/close.less
index f915667e5c..a2936ec2f7 100644
--- a/less/close.less
+++ b/less/close.less
@@ -6,8 +6,8 @@
.close {
float: right;
font-size: (@font-size-base * 1.5);
- font-weight: bold;
- line-height: 1;
+ font-weight: @close-font-weight;
+ line-height: @close-line-height;
color: @close-color;
text-shadow: @close-text-shadow;
.opacity(.2);
diff --git a/less/variables.less b/less/variables.less
index 878725f6c4..c97847d7de 100644
--- a/less/variables.less
+++ b/less/variables.less
@@ -48,11 +48,13 @@
@font-size-large: ceil(@font-size-base * 1.25); // ~18px
@font-size-small: ceil(@font-size-base * 0.85); // ~12px
+@font-weight-base: 500;
+
@line-height-base: 1.428571429; // 20/14
@line-height-computed: floor(@font-size-base * @line-height-base); // ~20px
@headings-font-family: @font-family-base;
-@headings-font-weight: 500;
+@headings-font-weight: @font-weight-base;
@headings-line-height: 1.1;
@@ -120,6 +122,11 @@
@btn-hover-color: @btn-default-color;
+@btn-small-line-height: 1.5;
+@btn-link-disabled-color: @gray-dark;
+@btn-large-caret-border-width: 5px;
+
+
// Forms
// -------------------------
@@ -383,6 +390,8 @@
@alert-info-text: @state-info-text;
@alert-info-border: @state-info-border;
+@alert-link-font-weight: @font-weight-base;
+
// Progress bars
// -------------------------
@@ -467,6 +476,10 @@
@badge-active-color: @link-color;
@badge-active-bg: #fff;
+@badge-font-weight: bold;
+@badge-line-height: 1;
+@badge-border-radius: 10px;
+
// Breadcrumbs
// -------------------------
@@ -480,9 +493,13 @@
@carousel-text-shadow: 0 1px 2px rgba(0,0,0,.6);
@carousel-control-color: #fff;
+@carousel-control-width: 15%;
+@carousel-control-opacity: .5;
+@carousel-control-font-size: 20px;
-@carousel-indicator-border-color: #fff;
+@carousel-indicators-width: 120px;
@carousel-indicator-active-bg: #fff;
+@carousel-indicator-border-color: #fff;
@carousel-caption-color: #fff;
@@ -492,6 +509,9 @@
@close-color: #000;
@close-text-shadow: 0 1px 0 #fff;
+@close-font-weight: bold;
+@close-line-height: 1;
+
// Code
// ------------------------