Steps to override SCSS of Bootstrap

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:...

Project Structure

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