Customizing Tabstrip
The following table lists the available variables for customization.
| Name | Type | Default value | Computed 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-bg | null | null | |
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-bg | null | null | |
Description
Background color of tabs | |||
| $tabstrip-item-text | $link-text | ||
Description
Text color of tabs | |||
| $tabstrip-item-border | null | null | |
Description
Border color of tabs | |||
| $tabstrip-item-gradient | null | null | |
Description
Background gradient of tabs | |||
| $tabstrip-item-hovered-bg | null | null | |
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-gradient | null | null | |
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-gradient | null | null | |
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 | |||