Bootstrap 5 Modal SASS

Bootstrap 5 Modal SASS can be used to change the default values provided for the modal by customizing SCSS file.

SASS Variables of Modal

• $modal-inner-padding: This variable provides the padding around the contents of modal header, modal body, and modal footer. By default, it is 1rem.
• $modal-footer-margin-between: This variable provides the margin for the content in modal footer. By default, it is 0.5rem.
• $modal-dialog-margin: This variable provides the margin for the modal dialog. By default, it is 0.5rem
• $modal-dialog-margin-y-sm-up: This variable provides the top and bottom margin for the modal dialog in a small screen size. By default, it is 1.75rem.
• $modal-title-line-height: This variable provides the line height for the modal title in the modal. By default, it is 1.5
• $modal-content-color: This variable provides the text color of the content in the modal. By default, it is null.
• $modal-content-bg: This variable provides the background color for the content in the modal. By default, it is white.
• $modal-content-border-color: This variable provides the border color of the modal. By default, it is black color with an opacity of 0.2
• $modal-content-border-width: This variable provides the border width of the modal content. By default, it is 1px
• $modal-content-border-radius: This variable provides the border radius of the modal content. By default, it is 0.5rem
• $modal-content-inner-border-radius: This variable provides the inner border radius of the modal. By default, it is -0.437rem
• $modal-content-box-shadow-xs: This variable provides the box shadow of the modal content in very small screen sizes. By default, it is black color with an opacity of 0.175
• $modal-content-box-shadow-sm-up: This variable provides the box shadow of the modal content in small screen sizes. By default, it is black color with an opacity of 0.15
• $modal-backdrop-bg: This variable provides the background color of the backdrop of modal. By default, it is black.
• $modal-backdrop-opacity: This variable provides the opacity of the backdrop of modal. By default, it is 0.5
• $modal-header-border-color: This variable provides the border color for the modal header. By default, it is gray.
• $modal-footer-border-color: This variable provides the border color for the modal footer. By default, it is gray.
• $modal-header-border-width: This variable provides the border width of the modal header. By default, it is 1px
• $modal-footer-border-width: This variable provides the border width of the modal footer. By default, it is 1px
• $modal-header-padding-y: This variable provides the top and bottom padding of the modal header. By default, it is 1rem
• $modal-header-padding-x: This variable provides the left and right padding of the modal header. By default, it is 1rem
• $modal-header-padding: This variable provides the padding in all four sides of the modal header. By default, it is 1rem
• $modal-sm: This variable provides the size of the modal in small screen. By default, it is 300px
• $modal-md: This variable provides the size of the modal in medium screen size. By default, it is 500px
• $modal-lg: This variable provides the size of the modal in large screen size. By default, it is 800px
• $modal-xl: This variable provides the size of the modal in extra large screen size. By default, it is 1140px
• $modal-fade-transform: This variable provides the transformation of the modal with fade. By default, it repositions in vertical direction by -50px
• $modal-show-transform: This variable provides the transformation of the modal on show. By default, it is none.
• $modal-transition: This variable provides the transition of the modal. By default, it transforms with 0.3 seconds duration and ease-out as transition effect
• $modal-scale-transform: This variable provides the transformation of the modal on scale. By default, it resizes to 1.02 scaling.

Steps to override SCSS of Bootstrap

Step 1: Install bootstrap using following command:

npm i bootstrap sass

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 live server extension or using following command in the terminal

scss custom.scss custom.css

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

Project Structure

The custom SCSS file name is custom.scss” and custom.css” is converted file.

Syntax:

$variable:value;
@import "./node_modules/bootstrap/scss/bootstrap"

Example 1: In this example, we make use of some of the above sass variables of dropdown.

HTML

<!--index.html -->

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Bootstrap 5 Modal SASS</title>
        <link href=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="./custom.css" />
        <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
        <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
        </script>
    </head>
    <body style="text-align: center">
        <h1 class="text-success ps-2">GeeksforGeeks</h1>
        <h3 class="p-2">Modal SASS</h3>
        <div class="container" style="width: 100%">
            <button
                type="button"
                class="btn btn-success"
                data-bs-toggle="modal"
                data-bs-target="#myModal"
            >
                Open modal
            </button>
        </div>
        <!-- The Modal -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            Computer Science Engineering
                        </h4>
                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                        ></button>
                    </div>
                    <div class="modal-body">
                        The subjects in Computer Science
                        Engineering are Basics of
                        programming, Computer Networks, Data
                        structures and Algorithms, Operating
                        Systems, Database Management System,
                        Computer Graphics, Computer
                        Architecture, Object Oriented
                        Programming.
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-success"
                            data-bs-dismiss="modal"
                        >
                            Okay
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

/* custom.scss*/
$modal-inner-padding:1.4rem;
$modal-content-color:green;
$modal-content-border-width:6px;
$modal-content-border-color:black;
@import "node_modules/bootstrap/scss/bootstrap"

CSS file created after conversion

CSS

/* Part of custom.css file */
.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1.4rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: green;
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: black;
  --bs-modal-border-width: 6px;
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - 6px);
  --bs-modal-header-padding-x: 1.4rem;
  --bs-modal-header-padding-y: 1.4rem;
  --bs-modal-header-padding: 1.4rem 1.4rem;
  --bs-modal-header-border-color: var(--bs-border-color);
  --bs-modal-header-border-width: 6px;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: var(--bs-border-color);
  --bs-modal-footer-border-width: 6px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

Output:

Output

Example 2: In this example, we make use of some of the above sass variables of dark dropdown.

HTML

<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta
            name="viewport"
            content="width=device-width, initial-scale=1.0"
        />
        <title>Bootstrap 5 Modal SASS</title>
        <link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css"
            rel="stylesheet"
        />
        <link rel="stylesheet" href="./custom.css" />
        <script src="node_modules/bootstrap/dist/js/bootstrap.js"></script>
        <script src=
"https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js">
        </script>
    </head>
    <body style="text-align: center">
        <h1 class="text-success ps-2">GeeksforGeeks</h1>
        <h3 class="p-2">Modal SASS</h3>
        <div class="container" style="width: 100%">
            <button
                type="button"
                class="btn btn-success"
                data-bs-toggle="modal"
                data-bs-target="#myModal"
            >
                Open modal
            </button>
        </div>
        <!-- The Modal -->
        <div class="modal" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <h4 class="modal-title">
                            Computer Science Engineering
                        </h4>
                        <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                        ></button>
                    </div>
                    <div class="modal-body">
                        The subjects in Computer Science
                        Engineering are Basics of
                        programming, Computer Networks, Data
                        structures and Algorithms, Operating
                        Systems, Database Management System,
                        Computer Graphics, Computer
                        Architecture, Object Oriented
                        Programming.
                    </div>
                    <div class="modal-footer">
                        <button
                            type="button"
                            class="btn btn-success"
                            data-bs-dismiss="modal"
                        >
                            Okay
                        </button>
                    </div>
                </div>
            </div>
        </div>
    </body>
</html>

CSS

/* Custom.scss*/

$modal-content-color:green;
$modal-backdrop-bg:green;
$modal-header-border-color:green;
$modal-header-border-width:7px;
$modal-footer-border-width:3px;
@import "node_modules/bootstrap/scss/bootstrap"

CSS file created after conversion:

This is the code used in the above HTML code.

CSS

/* Part of custom.css*/
.modal {
  --bs-modal-zindex: 1055;
  --bs-modal-width: 500px;
  --bs-modal-padding: 1rem;
  --bs-modal-margin: 0.5rem;
  --bs-modal-color: green;
  --bs-modal-bg: var(--bs-body-bg);
  --bs-modal-border-color: var(--bs-border-color-translucent);
  --bs-modal-border-width: var(--bs-border-width);
  --bs-modal-border-radius: var(--bs-border-radius-lg);
  --bs-modal-box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
  --bs-modal-inner-border-radius:
        calc(var(--bs-border-radius-lg) - (var(--bs-border-width)));
  --bs-modal-header-padding-x: 1rem;
  --bs-modal-header-padding-y: 1rem;
  --bs-modal-header-padding: 1rem 1rem;
  --bs-modal-header-border-color: green;
  --bs-modal-header-border-width: 7px;
  --bs-modal-title-line-height: 1.5;
  --bs-modal-footer-gap: 0.5rem;
  --bs-modal-footer-bg: ;
  --bs-modal-footer-border-color: green;
  --bs-modal-footer-border-width: 3px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-modal-zindex);
  display: none;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}
.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  color: var(--bs-modal-color);
  pointer-events: auto;
  background-color: var(--bs-modal-bg);
  background-clip: padding-box;
  border: var(--bs-modal-border-width) solid var(--bs-modal-border-color);
  border-radius: var(--bs-modal-border-radius);
  outline: 0;
}

.modal-backdrop {
  --bs-backdrop-zindex: 1050;
  --bs-backdrop-bg: green;
  --bs-backdrop-opacity: 0.5;
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--bs-backdrop-zindex);
  width: 100vw;
  height: 100vh;
  background-color: var(--bs-backdrop-bg);
}

Output:

Output