dashnix

Modal

Modal components

Modal title

Modal body text goes here.

Live demo

Static backdrop

Scrolling long content

Scrolling long content

Vertically centered

Vertically centered scrollable

Tooltips and popovers

Using the grid

Varying modal content

Toggle between modals

Optional sizes

Fullscreen Modal

Optional sizes Info

Modals have three optional sizes, available via modifier classes to be placed on a .modal-dialog. These sizes kick in at certain breakpoints to avoid horizontal scrollbars on narrower viewports.

Size Class Modal max-width
Small .modal-sm 300px
Default None 500px
Large .modal-lg 800px
Extra large .modal-xl 1140px 
<div class="modal-dialog modal-xl">...</div>
                                            <div class="modal-dialog modal-lg">...</div>
                                            <div class="modal-dialog modal-sm">...</div>

Fullscreen Modal Info

Another override is the option to pop up a modal that covers the user viewport, available via modifier classes that are placed on a .modal-dialog.

Class Availability
.modal-fullscreen Always
.modal-fullscreen-sm-down 576px
.modal-fullscreen-md-down 768px
.modal-fullscreen-lg-down 992px
.modal-fullscreen-xl-down 1200px
.modal-fullscreen-xxl-down 1400px 
<!-- Full screen modal -->
                                            <div class="modal-dialog modal-fullscreen-sm-down">
                                            ...
                                            </div>

Template Settings