Bootstrap 5 Close Button SASS
Last Updated :
27 Dec, 2022
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.
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
SCSS
$btn-close-hover-opacity: 1 ;
$btn-close-bg: url (
$btn-close- width : 2em ;
$btn-close-padding-x: 1em ;
$btn-close-opacity: 0.6 ;
$btn-close-disabled-opacity: 0.7 ;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css
CSS
.btn-close {
box-sizing: content-box;
width : 2em ;
height : 2em ;
padding : 1em 1em ;
color : #000 ;
background : transparent
url ("
center / 2em auto no-repeat ;
border : 0 ;
border-radius: 0.375 rem;
opacity: 0.6 ;
}
.btn-close:hover {
color : #000 ;
text-decoration : none ;
opacity: 1 ;
}
.btn-close:disabled, .btn-close.disabled {
pointer-events: none ;
-webkit-user-select: none ;
-moz-user-select: none ;
-ms-user-select: none ;
user-select: none ;
opacity: 0.7 ;
}
|
index.html
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport"
content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet" >
< script src =
"node_modules/bootstrap/dist/js/bootstrap.js" >
</ script >
< style >
.btn-close {
box-sizing: content-box;
width: 2em;
height: 2em;
padding: 1em 1em;
color: #000;
background: transparent
url("
center/2em auto no-repeat;
border: 0;
border-radius: 0.375rem;
opacity: 0.6;
}
.btn-close:hover {
color: #000;
text-decoration: none;
opacity: 1;
}
.btn-close:disabled, .btn-close.disabled {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 0.7;
}
</ style >
</ head >
< body class = "text-success text-center" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
CLOSE button
< button type = "button" class = "btn-close" aria-label = "close" >
</ button >
< br >
Disabled CLOSE button
< button type = "button" class = "btn-close" disabled aria-label = "close" >
</ button >
</ body >
</ html >
|
Output:
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
SCSS
$btn-close-hover-opacity: 1 ;
$btn-close- width : 2em ;
$btn-close-padding-x: 1em ;
$btn-close-opacity: 0.6 ;
$btn-close-disabled-opacity: 0.1 ;
$btn-close- color : green ;
@import "./node_modules/bootstrap/scss/bootstrap"
|
CSS file created after conversion
custom.css
CSS
.btn-close {
box-sizing: content-box;
width : 2em ;
height : 2em ;
padding : 1em 1em ;
color : green ;
background : transparent
url (
viewBox= '0 0 16 16' fill= 'green' % 3 e% 3 cpath d='M. 293.293 a 1 1 0 0
1 1.414 0 L 8 6.586 14.293 . 293 a 1 1 0 1 1 1.414 1.414 L 9.414 8 l 6.293
6.293 a 1 1 0 0 1 -1.414 1.414 L 8 9.414 l -6.293 6.293 a 1 1 0 0 1 -1.414 -1.414 L 6.586
8 . 293 1.707 a 1 1 0 0 1 0 -1.414 z'/% 3 e% 3 c/svg% 3 e")
center / 2em auto no-repeat ;
border : 0 ;
border-radius: 0.375 rem;
opacity: 0.6 ;
}
.btn-close:hover {
color : green ;
text-decoration : none ;
opacity: 1 ;
}
.btn-close:disabled, .btn-close.disabled {
pointer-events: none ;
-webkit-user-select: none ;
-moz-user-select: none ;
-ms-user-select: none ;
user-select: none ;
opacity: 0.1 ;
}
|
index.html
HTML
<!DOCTYPE html>
< html lang = "en" >
< head >
< meta charset = "UTF-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0" >
< link href =
rel = "stylesheet" >
< script src =
"node_modules/bootstrap/dist/js/bootstrap.js" >
</ script >
< style >
.btn-close {
box-sizing: content-box;
width: 2em;
height: 2em;
padding: 1em 1em;
color: green;
background: transparent
url(
viewBox='0 0 16 16' fill='green'%3e%3cpath d='M.293.293a1 1 0 0
1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293
6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586
8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e")
center/2em auto no-repeat;
border: 0;
border-radius: 0.375rem;
opacity: 0.6;
}
.btn-close:hover {
color: green;
text-decoration: none;
opacity: 1;
}
.btn-close:disabled, .btn-close.disabled {
pointer-events: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
opacity: 0.1;
}
</ style >
</ head >
< body style = "text-align: center;" class = "text-success" >
< h1 class = "text-success" >
GeeksforGeeks
</ h1 >
CLOSE button
< button type = "button" class = "btn-close" aria-label = "close" >
</ button >
< br >
Disabled CLOSE button
< button type = "button" class = "btn-close" disabled aria-label = "close" >
</ button >
</ body >
</ html >
|
Output:
Output
Reference:
https://getbootstrap.com/docs/5.0/components/close-button/#sass
Share your thoughts in the comments
Please Login to comment...