All Components

Customization

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

Variables

Common

Name Default value Description
$font-size $font-size-base Base font size across all components.
$font-family $font-family-base Font family across all components.
$font-family-monospace $font-family-monospace Font family for monospaced text. Used for styling the code.
$line-height $line-height-base Line height used along with $font-size.
$border-radius $border-radius Border radius for all components.
$accent theme-color("primary") The color that focuses the user attention.
Used for primary buttons and for elements of primary importance across the theme.
$accent-contrast contrast-wcag( $accent ) The color used along with the accent color denoted by $accent.
Used to provide contrast between the background and foreground colors.
$base-bg darken( $body-bg, 3% ) The background of the components' chrome area.
$base-text $body-color The text color of the components' chrome area.
$base-border darken( $base-bg, 3% ) The border color of the components' chrome area.
$base-gradient none The gradient background of the components' chrome area.
$hovered-bg darken( $base-bg, 3% ) The background of hovered items.
$hovered-text $base-text The text color of hovered items.
$hovered-border darken( $base-border, 12% ) The border color of hovered items.
$hovered-gradient none The gradient background of hovered items.
$selected-bg $accent The background of selected items.
$selected-text contrast-wcag( $selected-bg ) The text color of selected items.
$selected-border darken( $selected-bg, 12% ) The border color of selected items.
$selected-gradient none The gradient background of selected items.
$success theme-color("success") The color for error messages and states.
$info theme-color("info") The color for warning messages and states.
$warning theme-color("warning") The color for success messages and states.
$error theme-color("danger") The color for informational messages and states.

Buttons

Name Default value Description
$button-bg theme-color("secondary") The background of the buttons.
$button-text contrast-wcag( $button-bg ) The text color of the buttons.
$button-border $button-bg The border color of the buttons.
$button-gradient none The background gradient of the buttons.
$button-hovered-bg darken( $button-bg, 7.5% ) The background of hovered buttons.
$button-hovered-text contrast-wcag( $button-hovered-bg ) The text color of hovered buttons.
$button-hovered-border darken( $button-border, 10% ) The border color of hovered buttons.
$button-hovered-gradient none The background gradient of hovered buttons.
$button-pressed-bg $button-hovered-bg The background color of pressed buttons.
$button-pressed-text $button-hovered-text The text color of pressed buttons.
$button-pressed-border $button-hovered-border The border color of pressed buttons.
$button-pressed-gradient none The background gradient of pressed buttons.
$button-focused-shadow 0 0 0 3px rgba($button-border, .5) The shadow of focused buttons.

Charts

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

Toolbar

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

Mixins

In this article