Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.
When modals become too long for the user’s viewport or device,they scroll independent of the page itself.
Add .modal-dialog-centeredto .modal-dialogto vertically center the modal.
Modals have two 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.
Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTargetand HTML data-*attributes(possibly via jQuery) to vary the contents of the modal depending on which button was clicked.
Below is a live demo followed by example HTML and JavaScript. For more information,read the modal events docsfor details on relatedTarget.
Gull - Laravel+Bootstrap 4 admin template
Lorem ipsum,dolor sit amet consectetur adipisicing elit. Libero quis beatae officia saepe perferendis voluptatum minima eveniet voluptates dolorum,temporibus nisi maxime nesciunt totam repudiandae commodi sequi dolor quibusdam sunt.
©2026 Gull HTML
All rights reserved
