Customization

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

Variables

Common

Name Type Default value Computed value
$border-radius $border-radius $border-radius
Description
Border radius for all components.
$base-bg try-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-border try-darken( $base-bg, 3% ) try-darken( $base-bg, 3% )
Description
The border color of the components' chrome area.
$base-gradient null null
Description
The gradient background of the components' chrome area.
$hovered-bg try-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-border try-darken( $base-border, 12% ) try-darken( $base-border, 12% )
Description
The border color of hovered items.
$hovered-gradient null null
Description
The gradient background of hovered items.
$selected-bg $primary $accent
Description
The background of selected items.
$selected-text contrast-wcag( $selected-bg ) contrast-wcag( $selected-bg )
Description
The text color of selected items.
$selected-border try-darken( $selected-bg, 12% ) try-darken( $selected-bg, 12% )
Description
The border color of selected items.
$selected-gradient null null
Description
The gradient background of selected items.

Buttons

Name Type Default value Computed value
$button-bg $secondary $secondary
Description
The background of the buttons.
$button-text contrast-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-gradient null null
Description
The background gradient of the buttons.
$button-hovered-bg try-darken( $button-bg, 7.5% ) try-darken( $button-bg, 7.5% )
Description
The background of hovered buttons.
$button-hovered-text contrast-wcag( $button-hovered-bg, $gray-900 ) contrast-wcag( $button-hovered-bg, $gray-900 )
Description
The text color of hovered buttons.
$button-hovered-border try-darken( $button-border, 10% ) try-darken( $button-border, 10% )
Description
The border color of hovered buttons.
$button-hovered-gradient null null
Description
The background gradient of hovered buttons.
$button-pressed-bg try-darken( $button-bg, 10% ) try-darken( $button-bg, 10% )
Description
The background color of pressed buttons.
$button-pressed-text contrast-wcag( $button-pressed-bg, $gray-900 ) contrast-wcag( $button-pressed-bg, $gray-900 )
Description
The text color of pressed buttons.
$button-pressed-border try-darken( $button-border, 12.5% ) try-darken( $button-border, 12.5% )
Description
The border color of pressed buttons.
$button-pressed-gradient null null
Description
The background gradient of pressed buttons.
$button-focused-shadow 0 0 0 3px rgba($button-border, .5) 0 0 0 3px rgba($button-border, .5)
Description
The shadow of focused buttons.

Charts

Name Type Default value Computed 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-lines rgba(0, 0, 0, .08) rgba(0, 0, 0, .08)
Description
The color of the Chart grid lines (major).
$chart-minor-lines rgba(0, 0, 0, .04) rgba(0, 0, 0, .04)
Description
The color of the Chart grid lines (minor).

Color System

Name Type Default value Computed value
$accent Color $primary $accent
Deprecated
Will be removed in v5. Use `$primary` variable instead.
Description
The color that focuses the user attention.
$accent-contrast Color contrast-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.
$primary Color $accent $accent
Description
The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$primary-contrast Color $accent-contrast contrast-wcag( $accent )
Description
The color used along with the primary color denoted by $primary.
Used to provide contrast between the background and foreground colors.
$secondary Color $secondary $secondary
Description
The secondary color of the theme.
$secondary-contrast Color contrast-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.
$tertiary Color $purple
Description
The tertiary color of the theme.
$tertiary-contrast Color contrast-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.
$info Color $info $info
Description
The color for informational messages and states.
$success Color $success $success
Description
The color for success messages and states.
$warning Color $warning $warning
Description
The color for warning messages and states.
$error Color $danger
Description
The color for error messages and states.
$dark Color $dark $dark
Description
The dark color of the theme.
$light Color $light $light
Description
The light color of the theme.
$inverse if( $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

Name Type Default value Computed 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.

Icons

Name Type Default value Computed value
$icon-font-url null null
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

Toolbar

Name Type Default value Computed 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

Name Type Default value Computed 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

In this article