+
+
Customize LESS variables to define colors, sizes and more inside your custom CSS stylesheets.
+
+
Basics
+
+
Body background
+
+
+
@body-bg
+
+
Background color applied to <body>.
+
+
+
+
Typography
+
+
+
@font-family-sans-serif
+
+
Default sans-serif fonts.
+
@font-family-serif
+
+
Default serif fonts.
+
@font-family-monospace
+
+
Default monospace fonts for <code> and <pre>.
+
+
+
@font-family-base
+
+
Used to globally set font-family in Bootstrap.
+
@font-size-base
+
+
Used to calculate font-size throughout Bootstrap.
+
@line-height-base
+
+
Used to calculate line-height throughout Bootstrap.
+
+
+
+
Code blocks
+
+
+
Headings
+
+
+
@headings-font-family
+
+
Choose a separate font-family for headings.
+
@headings-font-weight
+
+
Choose a separate font-weight for headings.
+
+
+
@headings-line-height
+
+
Choose a separate line-height for headings.
+
+
+
+
Colors
+
+
+
Define custom colors used in several contexts.
+
@brand-primary
+
+
Used for primary buttons, panels and more.
+
@brand-success
+
+
Used to indicate success.
+
@brand-warning
+
+
Used to indicate a warning.
+
@brand-danger
+
+
Used to indicate danger.
+
@brand-info
+
+
Used to indicate informational content.
+
+
+
Define your preferred colors for standard text and links.
+
@text-color
+
+
Global color set on the body.
+
@link-color
+
+
Global link color for text.
+
@link-color-hover
+
+
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.
+
+
+
@container-tablet
+
+
For @screen-sm and up.
+
+
+
@container-desktop
+
+
For @screen-md and up.
+
+
+
+
@container-lg-desktop
+
+
For @screen-lg and up.
+
+
+
+
Grid system
+
Define your custom responsive grid.
+
+
+
+
@grid-gutter-width
+
+
Padding between columns.
+
+
+
+
@grid-float-breakpoint
+
+
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, border radius, and padding.
+
Border radius
+
@alert-padding
+
+
@alert-border-radius
+
+
+
+
Navbar
+
+
+
+
Nav
+
+
Default nav
+
+
+
+
Tables
+
+
+
@table-bg
+
+
Default background color used for all tables.
+
@table-bg-accent
+
+
Background color used for .table-striped.
+
+
+
@table-bg-hover
+
+
Background color used for .table-hover.
+
@table-border-color
+
+
Border color for table and cell borders.
+
+
+
+
+
+
+
Inputs
+
@input-color
+
+
Text color for <input>s
+
@input-bg
+
+
<input> background color
+
@input-border
+
+
<input> border color
+
@input-border-radius
+
+
<input> border radius
+
@input-bg-disabled
+
+
<input disabled> background color
+
+
+
Placeholder
+
@input-color-placeholder
+
+
Placeholder text color
+
+
Legend
+
@legend-color
+
+
@legend-border-color
+
+
+
Input groups
+
@input-group-addon-bg
+
+
Background color for textual input addons
+
@input-group-addon-border-color
+
+
Border color for textual input addons
+
+
+
+
Dropdowns
+
+
+
Dropdown menu
+
@dropdown-bg
+
+
Dropdown menu background color
+
@dropdown-border
+
+
Dropdown menu border color
+
@dropdown-fallback-border
+
+
Dropdown menu border color for IE8
+
@dropdown-caret-color
+
+
Indicator arrow for showing an element has a dropdown
+
@dropdown-divider-bg
+
+
Dropdown divider top border color
+
@dropdown-header-color
+
+
Text color for headers within dropdown menus
+
+
+
Dropdown items
+
@dropdown-link-color
+
+
Dropdown text color
+
+
@dropdown-link-hover-color
+
+
Hovered dropdown menu entry text color
+
@dropdown-link-hover-bg
+
+
Hovered dropdown menu entry text color
+
+
@dropdown-link-active-color
+
+
Active dropdown menu entry text color
+
@dropdown-link-active-bg
+
+
Active dropdown menu entry background color
+
+
@dropdown-link-disabled-color
+
+
Disabled dropdown menu entry background color
+
+
+
+
Panels and wells
+
Common panel styles
+
+
Contextual panel colors
+
+
+
Wells
+
@well-bg
+
+
+
Accordion
+
@accordion-border-bg
+
+
+
Badges
+
+
+
@badge-color
+
+
Badge text color
+
@badge-bg
+
+
Badge background color
+
@badge-link-hover-color
+
+
Linked badge text color on hover
+
+
+
@badge-active-color
+
+
Badge text color in active nav link
+
@badge-active-bg
+
+
Badge text color in active nav link
+
+
+
+
Breadcrumbs
+
+
+
@breadcrumb-color
+
+
Breadcrumb text color
+
+
+
@breadcrumb-bg
+
+
Breadcrumb background color
+
+
+
@breadcrumb-active-color
+
+
Text color of current page in the breadcrumb
+
+
+
+
Jumbotron
+
+
+
Modals
+
+
+
@modal-inner-padding
+
+
Padding applied to the modal body
+
+
+
@modal-title-padding
+
+
Padding applied to the modal title
+
+
+
@modal-title-line-height
+
+
Modal title line-height
+
+
+
@modal-content-bg
+
+
Background color of modal content area
+
+
+
@modal-content-border-color
+
+
Modal content border color
+
+
+
@modal-content-fallback-border-color
+
+
Modal content border color for IE8
+
+
+
@modal-backdrop-bg
+
+
Modal backdrop background color
+
+
+
@modal-header-border-color
+
+
Modal header border color
+
+
+
@modal-footer-border-color
+
+
Modal footer border color
+
+
+
+
Carousel
+
@carousel-text-shadow
+
+
@carousel-control-color
+
+
@carousel-indicator-border-color
+
+
@carousel-indicator-active-bg
+
+
@carousel-caption-color
+
+
+
List group
+
Background
+
+
+
@list-group-bg
+
+
Default background color
+
+
+
@list-group-hover-bg
+
+
Background color of single list elements on hover
+
+
+
@list-group-active-bg
+
+
Background color of active list elements
+
+
+
Borders
+
+
+
@list-group-border
+
+
Default border color
+
+
+
@list-group-border-radius
+
+
List group border radius
+
+
+
@list-group-active-border
+
+
Border color of active list elements
+
+
+
@list-group-active-color
+
+
Text color of active list elements
+
Thumbnails
+
+
+
@thumbnail-padding
+
+
Padding around the thumbnail image
+
@thumbnail-bg
+
+
Thumbnail background color
+
@thumbnail-border
+
+
Thumbnail border color
+
@thumbnail-border-radius
+
+
Thumbnail border radius
+
+
+
@thumbnail-caption-padding
+
+
Padding around the thumbnail caption
+
@thumbnail-caption-color
+
+
Custom text color for thumbnail captions
+
+
+
Progress bars
+
+
+
@progress-bg
+
+
Background color of the whole progress component
+
+
+
@progress-bar-bg
+
+
Default progress bar color
+
+
+
@progress-bar-success-bg
+
+
Success progress bar color
+
+
+
+
+
@progress-bar-warning-bg
+
+
Warning progress bar color
+
+
+
@progress-bar-danger-bg
+
+
Danger progress bar color
+
+
+
@progress-bar-info-bg
+
+
Info progress bar color
+
+
+
@progress-bar-color
+
+
Info progress bar text color
+
+
+
@progress-bar-text-shadow
+
+
Info progress bar text shadow
+
+
+
+
+
+
@pagination-bg
+
+
Background color
+
+
+
@pagination-border
+
+
Border color
+
+
+
@pagination-active-bg
+
+
Active background color
+
+
+
@pagination-active-color
+
+
Active text color
+
+
+
@pagination-disabled-color
+
+
Disabled text color
+
+
+
+
+
+
@pager-border-radius
+
+
Pager border radius
+
+
+
@pager-disabled-color
+
+
Pager disabled state color
+
+
+
+
Labels
+
+
+
@label-default-bg
+
+
Default label background color
+
@label-primary-bg
+
+
Primary label background color
+
@label-success-bg
+
+
Success label background color
+
+
+
@label-info-bg
+
+
Info label background color
+
@label-warning-bg
+
+
Warning label background color
+
@label-danger-bg
+
+
Danger label background color
+
+
+
+
Tooltip styles
+
+
+
@tooltip-color
+
+
Tooltip text color
+
@tooltip-bg
+
+
Tooltip background color
+
+
+
@tooltip-arrow-width
+
+
Tooltip arrow width
+
@tooltip-arrow-color
+
+
Tooltip arrow color
+
+
+
@tooltip-max-width
+
+
Tooltip max width
+
+
+
Popover styles
+
+
+
@popover-bg
+
+
Popover body background color
+
@popover-title-bg
+
+
Popover title background color
+
+
+
@popover-arrow-width
+
+
Popover arrow width
+
@popover-arrow-color
+
+
Popover arrow color
+
+
+
+
+
@popover-arrow-outer-width
+
+
Popover outer arrow width
+
+
+
@popover-arrow-outer-color
+
+
Popover outer arrow color
+
+
+
@popover-arrow-outer-fallback-color
+
+
Popover outer arrow fallback color
+
+
+
+
+
@popover-max-width
+
+
Popover maximum width
+
+
+
@popover-border-color
+
+
Popover border color
+
+
+
@popover-fallback-border-color
+
+
Popover fallback border color
+
+
+
+
Close button
+
+
+
Type
+
+
+
@text-muted
+
+
Text muted color
+
+
+
@abbr-border-color
+
+
Abbreviations and acronyms border color
+
+
+
@headings-small-color
+
+
Headings small color
+
+
+
@blockquote-small-color
+
+
Blockquote small color
+
+
+
@blockquote-border-color
+
+
Blockquote border color
+
+
+
@page-header-border-color
+
+
Page header border color
+
+
+
Other
+
+
+
@hr-border
+
+
Horizontal line color
+
+
+
@component-offset-horizontal
+
+
Horizontal offset for forms and lists
+
+
+