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.
<!--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 =
rel = "stylesheet"
/>
< link rel = "stylesheet" href = "./custom.css" />
< script src = "node_modules/bootstrap/dist/js/bootstrap.js" ></ script >
< script src =
</ 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 >
|
/* custom.scss*/ $modal-inner- padding : 1.4 rem;
$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
/* Part of custom.css file */ .modal { --bs-modal-zindex: 1055 ;
--bs-modal- width : 500px ;
--bs-modal- padding : 1.4 rem;
--bs-modal- margin : 0.5 rem;
--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.125 rem 0.25 rem rgba( 0 , 0 , 0 , 0.075 );
--bs-modal-inner-border-radius: calc(var(--bs-border-radius-lg) - 6px );
--bs-modal-header-padding-x: 1.4 rem;
--bs-modal-header-padding-y: 1.4 rem;
--bs-modal-header- padding : 1.4 rem 1.4 rem;
--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.5 rem;
--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:
Example 2: In this example, we make use of some of the above sass variables of dark dropdown.
<!-- 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
rel = "stylesheet"
/>
< link rel = "stylesheet" href = "./custom.css" />
< script src = "node_modules/bootstrap/dist/js/bootstrap.js" ></ script >
< script src =
</ 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 >
|
/* 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.
/* Part of custom.css*/ .modal { --bs-modal-zindex: 1055 ;
--bs-modal- width : 500px ;
--bs-modal- padding : 1 rem;
--bs-modal- margin : 0.5 rem;
--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.125 rem 0.25 rem 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: 1 rem;
--bs-modal-header-padding-y: 1 rem;
--bs-modal-header- padding : 1 rem 1 rem;
--bs-modal-header- border-color : green ;
--bs-modal-header- border-width : 7px ;
--bs-modal-title- line-height : 1.5 ;
--bs-modal-footer-gap: 0.5 rem;
--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 : 100 vw;
height : 100 vh;
background-color : var(--bs-backdrop-bg);
} |
Output: