Bootstrap 5 Close Button SASS

Last Updated : 23 Jul, 2025

Bootstrap 5 Close button SASS can be used to change the default values provided for the close button by customizing scss file of bootstrap 5.

SASS variables of Close button:

$btn-close-width: This variable provides the width of the close button. By default, it is 1em.
$btn-close-height: This variable provides the height of the close button. By default, it is the same value of $btn-close-width.
$btn-close-padding-x: This variable provides the left and right padding of the close button. By default, it is 0.25em.
$btn-close-padding-y: This variable provides the close button's top and bottom padding. By default, it is the same value as $btn-close-padding-y.
$btn-close-color: This variable provides the color of the close button. By default, it is black.
$btn-close-bg: This variable provides the background image of the close button. By default, it is an URL of an SVG image of a close symbol.
$btn-close-focus-shadow: This variable sets the default focus shadow. By default, it is the same value as $input-btn-focus-box-shadow.
$btn-close-opacity: This variable provides the opacity of the close button. By default, it is 0.5.
$btn-close-hover-opacity: This variable provides the opacity of the close button on hovering it. By default, it is 0.75.
$btn-close-disabled-opacity: This variable provides the opacity of the close button when in a disabled state. By default, it is 0.25.

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.

$class_to_override: values;
@import "node_modules/bootstrap/scss/bootstrap"

Step 3: Convert the file to CSS using a live server extension.

Step 4: Include the converted scss file to your HTML after the link tag of Bootstrap CSS

Project Structure: Here the custom scss file name is “custom.scss” and custom.css is the converted file.

👁 Image

Syntax:

$btn-close-width:value; // for changing the width of the close button $btn-close-padding-x:value; // for changing the left padding and right padding of the close button $btn-close-color:value; // for changing the color of the close button $btn-close-bg:value; // for changing the background image of close button $btn-close-opacity:value; // for changing the opacity of close button $btn-close-hover-opacity:value; // for changing the opacity of close button on hovering $btn-close-disabled-opacity:value; // for changing the opacity of close button when close button is disabled @import "./node_modules/bootstrap/scss/bootstrap"

Example 1: In this example, use the $btn-close-hover-opacity, $btn-close-bg, $btn-close-width, $btn-close-padding-x, $btn-close-opacity, $btn-close-disabled-opacity variables. Here in the scss file, the background image of a close button is changed instead of the default close image, the opacity of the close button on hovering is changed to 1, the width of the close button is changed to 2em, and the left and right padding of the close button is changed to 1em, the opacity of the close button is changed to 0.6, the opacity of a disabled close button is changed to 0.7.

custom.scss

CSS file created after conversion

custom.css

index.html

Output:

👁 Image

Output

Example 2: In this example, use the $btn-close-hover-opacity, $btn-close-width, $btn-close-padding-x, $btn-close-opacity, $btn-close-disabled-opacity, $btn-close-color variables. Here in the scss file, the color of the default close button is changed to green, the opacity of the close button on hovering is changed to 1, the width of the close button is changed to 2em, the left and right padding of the close button is changed to 1em, the opacity of the close button is changed to 0.6, the opacity of a disabled close button is changed to 0.1.

custom.scss

CSS file created after conversion

custom.css

index.html

Output:

👁 Image

Output