Bootstrap 5 Dropdown SASS can be used to change the default values provided for the dropdowns by customizing SCSS file.
SASS variables of Dropdown
$dropdown-min-width: This variable provides the minimum width of the dropdown. By default, it is 10rem.
$dropdown-padding-x: This variable provides the left and right padding of the dropdown. By default, it is 0.
$dropdown-padding-y: This variable provides the top and bottom padding of the dropdown. By default, it is 0.5rem.
$dropdown-spacer: This variable provides the margin and padding of the dropdown. By default, it is 0.125rem.
$dropdown-font-size: This variable provides the font size of the text in dropdown. By default, it is 1rem.
$dropdown-color: This variable provides the text color of the dropdown. By default, it is gray color.
$dropdown-bg: This variable provides the background color of the dropdown. By default, it is white color.
$dropdown-border-color: This variable provides the border color of the dropdown. By default, it is black color with opacity of 0.15.
$dropdown-border-radius: This variable provides the border radius of the dropdown. By default, it is 0.375rem.
$dropdown-border-width: This variable provides the border width of the dropdown. By default, it is 1px.
$dropdown-inner-border-radius: This variable provides the radius of the inner border of the dropdown. By default, it is 0.31rem.
$dropdown-divider-bg: This variable provides the background color of the divider in the dropdown. By default, it is black color with opacity of 0.1.
$dropdown-divider-margin-y: This variable provides the top and bottom margin of the divider in the dropdown. By default, it is 0.0625rem.
$dropdown-box-shadow: This variable provides the box shadow of the dropdown. By default, the h-offset is 0.5rem, the v-offset is 1rem in black color with opacity of 0.15.
$dropdown-link-color: This variable provides the text color of the link in dropdown. By default, it is gray color.
$dropdown-link-hover-color: This variable provides the text color of the link on hover in dropdown. By default, it is gray color with an shade of 10 percentage.
$dropdown-link-hover-bg: This variable provides the background color of the link in the dropdown on hover. By default, it is gray color.
$dropdown-link-active-color: This variable provides the text color of the active dropdown item in the dropdown. By default, it is white color.
$dropdown-link-active-bg: This variable provides the background color of the active dropdown item in the dropdown. By default, it is blue color.
$dropdown-link-disabled-color: This variable provides the color of the disabled dropdown item in the dropdown. By default, it is gray color.
$dropdown-item-padding-y: This variable provides the top and bottom padding of the dropdown item in the dropdown. By default, it is 0.25rem.
$dropdown-item-padding-x: This variable provides the left and right padding of the dropdown item in the dropdown. By default, it is 1rem.
$dropdown-header-color: This variable provides the color of the dropdown header in the dropdown. By default, it is gray color.
$dropdown-header-padding: This variable provides the padding of the dropdown header in the dropdown. By default, it is 0.5rem.
$dropdown-dark-color: This variable provides the text color of the dark dropdown in the dropdown. By default, it is white color with 30 percentage of gray color.
$dropdown-dark-bg: This variable provides the background color of the dark dropdown in the dropdown. By default, it is white color with 80 percentage of gray color.
$dropdown-dark-border-color: This variable provides the border color of the dark dropdown. By default, it is black color.
$dropdown-dark-divider-bg: This variable provides the background color of the dark dropdown. By default, it is black color.
$dropdown-dark-box-shadow: This variable provides the box shadow of the dark dropdown. By default, it is null.
$dropdown-dark-link-color: This variable provides the link color in the dark dropdown. By default, it is gray color.
$dropdown-dark-link-hover-color: This variable provides the link color on hover in the dropdown. By default, it is white.
$dropdown-dark-link-hover-bg: This variable provides the background color of the link in the dark dropdown on hover. By default, it is white color.
$dropdown-dark-link-active-color: This variable provides the color of the link which is active in the dark dropdown. By default, it is white color.
$dropdown-dark-link-active-bg: This variable provides the background color of the link which is active in the dark dropdown. By default, it is blue color.
$dropdown-dark-link-disabled-color: This variable provides the color of the link which is disabled in the dark dropdown. By default, it is gray color.
$dropdown-dark-header-color: This variable provides the text color of the header in the dark dropdown. By default, it is gray color.
$caret-width: This variable provides the width of the caret in the dropdown. By default, it is 0.3em.
$caret-vertical-align: This variable provides the vertical alignment of the caret in the dropdown. By default, it is 0.25em.
$caret-spacing: This variable provides the spacing of the caret. By default, it is 0.25em.
Steps to override SCSS of Bootstrap
Step 1: Install bootstrap using following command:
npm i bootstrap
Step 2: Create your custom SCSS file and write the variable you want to override. Then include the bootstrap SCSS file using import.
