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

In this article