Customizing Tabstrip

The following table lists the available variables for customization.

NameTypeDefault valueComputed value
$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

In this article

Not finding the help you need?