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.
Bootstrap 5 Modal SASS
Bootstrap 5 Modal SASS can be used to change the default values provided for the modal by customizing SCSS file.
Contact Us