Customization

The following table lists the available variables for customizing the Bootstrap theme.

Variables

Common

NameTypeDefault valueComputed value
$border-radius$border-radius$border-radius
Description
Border radius for all components.
$base-bgtry-darken( $component-bg, 3% )try-darken( $component-bg, 3% )
Description
The background of the components' chrome area.
$base-text$component-color
Description
The text color of the components' chrome area.
$base-bordertry-darken( $base-bg, 3% )try-darken( $base-bg, 3% )
Description
The border color of the components' chrome area.
$base-gradientnullnull
Description
The gradient background of the components' chrome area.
$hovered-bgtry-darken( $base-bg, 3% )try-darken( $base-bg, 3% )
Description
The background of hovered items.
$hovered-text$base-text
Description
The text color of hovered items.
$hovered-bordertry-darken( $base-border, 12% )try-darken( $base-border, 12% )
Description
The border color of hovered items.
$hovered-gradientnullnull
Description
The gradient background of hovered items.
$selected-bg$primary$accent
Description
The background of selected items.
$selected-textcontrast-wcag( $selected-bg )contrast-wcag( $selected-bg )
Description
The text color of selected items.
$selected-bordertry-darken( $selected-bg, 12% )try-darken( $selected-bg, 12% )
Description
The border color of selected items.
$selected-gradientnullnull
Description
The gradient background of selected items.

Buttons

NameTypeDefault valueComputed value
$button-bg$secondary$secondary
Description
The background of the buttons.
$button-textcontrast-wcag( $button-bg, $gray-900 )contrast-wcag( $button-bg, $gray-900 )
Description
The text color of the buttons.
$button-border$button-bg$secondary
Description
The border color of the buttons.
$button-gradientnullnull
Description
The background gradient of the buttons.
$button-hovered-bgtry-darken( $button-bg, 7.5% )try-darken( $button-bg, 7.5% )
Description
The background of hovered buttons.
$button-hovered-textcontrast-wcag( $button-hovered-bg, $gray-900 )contrast-wcag( $button-hovered-bg, $gray-900 )
Description
The text color of hovered buttons.
$button-hovered-bordertry-darken( $button-border, 10% )try-darken( $button-border, 10% )
Description
The border color of hovered buttons.
$button-hovered-gradientnullnull
Description
The background gradient of hovered buttons.
$button-pressed-bgtry-darken( $button-bg, 10% )try-darken( $button-bg, 10% )
Description
The background color of pressed buttons.
$button-pressed-textcontrast-wcag( $button-pressed-bg, $gray-900 )contrast-wcag( $button-pressed-bg, $gray-900 )
Description
The text color of pressed buttons.
$button-pressed-bordertry-darken( $button-border, 12.5% )try-darken( $button-border, 12.5% )
Description
The border color of pressed buttons.
$button-pressed-gradientnullnull
Description
The background gradient of pressed buttons.
$button-focused-shadow0 0 0 3px rgba($button-border, .5)0 0 0 3px rgba($button-border, .5)
Description
The shadow of focused buttons.

Charts

NameTypeDefault valueComputed value
$series-a#0275d8#0275d8
Description
The color of the first series.
$series-b#5bc0de#5bc0de
Description
The color of the second series.
$series-c#5cb85c#5cb85c
Description
The color of the third series.
$series-d#f0ad4e#f0ad4e
Description
The color of the fourth series.
$series-e#e67d4a#e67d4a
Description
The color of the fifth series.
$series-f#d9534f#d9534f
Description
The color of the sixth series.
$chart-major-linesrgba(0, 0, 0, .08)rgba(0, 0, 0, .08)
Description
The color of the Chart grid lines (major).
$chart-minor-linesrgba(0, 0, 0, .04)rgba(0, 0, 0, .04)
Description
The color of the Chart grid lines (minor).

Color System

NameTypeDefault valueComputed value
$accentColor$primary$accent
Deprecated
Will be removed in v5. Use `$primary` variable instead.
Description
The color that focuses the user attention.
$accent-contrastColorcontrast-wcag( $accent )contrast-wcag( $accent )
Deprecated
Will be removed in v5. Use `$primary-contrast` variable instead.
Description
The color used along with the primary color denoted by $primary.
$primaryColor$accent$accent
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrastColor$accent-contrastcontrast-wcag( $accent )
Description
The color used along with the primary color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondaryColor$secondary$secondary
Description
The secondary color of the theme.
$secondary-contrastColorcontrast-wcag( $secondary )contrast-wcag( $secondary )
Description
The color used along with the secondary color denoted by $secondary.
Used to provide contrast between the background and foreground colors.
$tertiaryColor$purple
Description
The tertiary color of the theme.
$tertiary-contrastColorcontrast-wcag( $tertiary )contrast-wcag( $tertiary )
Description
The color used along with the tertiary color denoted by $tertiary.
Used to provide contrast between the background and foreground colors.
$infoColor$info$info
Description
The color for informational messages and states.
$successColor$success$success
Description
The color for success messages and states.
$warningColor$warning$warning
Description
The color for warning messages and states.
$errorColor$danger
Description
The color for error messages and states.
$darkColor$dark$dark
Description
The dark color of the theme.
$lightColor$light$light
Description
The light color of the theme.
$inverseif( $is-dark-theme, $light, $dark )if( $is-dark-theme, $light, $dark )
Description
Inverse color of the theme. Depending on the theme luminance dark or lught, it will be light or dark

Component

NameTypeDefault valueComputed value
$component-bg$component-bg$component-bg
Description
Background color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-bg` e.g. `$grid-bg: $component-bg !defualt;`.
$component-text$component-color
Description
Text color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-text` e.g. `$grid-text: component-text !default;`.
$component-border$component-border-color
Description
Border color of a component.
Note: do not use this variable directly. Instead derive it as `$component-name-border` e.g. `$grid-border: component-border !default;`.
$widget-bg$component-bg$component-bg
Deprecated
Will be removed in v5. Use `$component-bg` variable instead.
Description
Background color of a component.
$widget-text$component-text
Deprecated
Will be removed in v5. Use `$component-text` variable instead.
Description
Text color of a component.
$widget-border$component-border
Deprecated
Will be removed in v5. Use `$component-border` variable instead.
Description
Border color of a component.

Grid

NameTypeDefault valueComputed value
$grid-bg$table-bg
Description
Background color of the grid component
$grid-text$table-color
Description
Text color of the grid component
$grid-border$table-border-color
Description
Border color of the grid component
$grid-header-bg$header-bg
Description
Background color of grid header
$grid-header-text$header-text
Description
Text color of grid header
$grid-header-border$header-border
Description
Border color of grid header
$grid-header-gradient$header-gradient
Description
Background gradient of grid header
$grid-alt-bg$table-accent-bg
Description
Background color of alternating rows in grid
$grid-alt-textnullnull
Description
Text color of alternating rows in grid
$grid-alt-bordernullnull
Description
Border color of alternating rows in grid
$grid-hovered-bg$table-hover-bg
Description
Background color of hovered rows in grid
$grid-hovered-text$table-hover-color
Description
Text color of hovered rows in grid
$grid-hovered-bordernullnull
Description
Border color of hovered rows in grid
$grid-selected-bgrgba($selected-bg, .25)rgba($selected-bg, .25)
Description
Background color of selected rows in grid
$grid-selected-text$grid-text
Description
Text color of selected rows in grid
$grid-selected-border$grid-border
Description
Border color of selected rows in grid

Icons

NameTypeDefault valueComputed value
$icon-font-urlnullnull
Description
The URL to the icon font that will be used by the theme
The default value of `null` embeds the package font with a `data:` URL

Tabstrip

NameTypeDefault valueComputed value
$button-border-width$btn-border-width
Description
Width of border around buttons
$button-border-radius$border-radius$border-radius
Description
Border radius of buttons
$button-padding-x$btn-padding-x
Description
Horizontal padding of buttons
$button-padding-y$btn-padding-y
Description
Vertical padding of buttons
$tabstrip-bgnullnull
Description
Background color of tabstrip component
$tabstrip-text$component-text
Description
Text color of tabstrip component
$tabstrip-border$nav-tabs-border-color
Description
Border color of tabstrip component
$tabstrip-item-padding-x$nav-item-padding-x
Description
Horizontal padding of tabs
$tabstrip-item-padding-y$nav-item-padding-y
Description
Vertical padding of tabs
$tabstrip-item-border-width$nav-tabs-border-width
Description
Width of border around tabs
$tabstrip-item-border-radius$nav-tabs-border-radius
Description
Border radius of tabs
$tabstrip-item-gap$nav-item-margin
Description
Spacing between tabs
$tabstrip-item-bgnullnull
Description
Background color of tabs
$tabstrip-item-text$link-text
Description
Text color of tabs
$tabstrip-item-bordernullnull
Description
Border color of tabs
$tabstrip-item-gradientnullnull
Description
Background gradient of tabs
$tabstrip-item-hovered-bgnullnull
Description
Background color of hovered tabs
$tabstrip-item-hovered-text$link-hover-text
Description
Text color of hovered tabs
$tabstrip-item-hovered-border$nav-tabs-link-hover-border-color
Description
Border color of hovered tabs
$tabstrip-item-hovered-gradientnullnull
Description
Background gradient of hovered tabs
$tabstrip-item-selected-bg$nav-tabs-link-active-bg
Description
Background color of selected tabs
$tabstrip-item-selected-text$nav-tabs-link-active-color
Description
Text color of selected tabs
$tabstrip-item-selected-border$nav-tabs-link-active-border-color
Description
Border color of selected tabs
$tabstrip-item-selected-gradientnullnull
Description
Background gradient of selected tabs
$tabstrip-content-padding-x$tabstrip-item-padding-x
Description
Horizontal padding of tabstrip content
$tabstrip-content-padding-y$tabstrip-item-padding-y
Description
Vertical padding of tabstrip content
$tabstrip-content-border-width$nav-tabs-border-width
Description
Width of border around tabstrip content
$tabstrip-content-bg$component-bg$component-bg
Description
Background color of tabstrip content
$tabstrip-content-text$component-text
Description
Text color of tabstrip content
$tabstrip-content-border$component-border
Description
Border color of tabstrip content

Toolbar

NameTypeDefault valueComputed value
$toolbar-padding-x$table-cell-padding / 2$table-cell-padding / 2
Description
The horizontal padding of the container.
$toolbar-padding-y$table-cell-padding / 2$table-cell-padding / 2
Description
The vertical padding of the container.

Typography

NameTypeDefault valueComputed value
$font-size$font-size-base
Description
Base font size across all components.
$font-family$font-family-base
Description
Font family across all components.
$font-family-monospace$font-family-monospace$font-family-monospace
Description
Font family for monospaced text. Used for styling the code.
$line-height$line-height-base
Description
Line height used along with $font-size.

Mixins