Open In App

Bootstrap 5 Close Button SASS

Improve
Improve
Like Article
Like
Save
Share
Report

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.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;
}


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(
        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' 
        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;
}


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(
        "data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg
        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



Last Updated : 27 Dec, 2022
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads