Modals

Basic Modal

Toggle a working modal demo by clicking the button below. It will slide down and fade in from the top of the page.

Scrolling long content

When modals become too long for the user’s viewport or device, they scroll independent of the page itself.

Vertically centered

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

Optional sizes

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.

Varying modal content

Have a bunch of buttons that all trigger the same modal with slightly different contents? Use event.relatedTarget and 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 docs for details on relatedTarget.

Gull - Laravel 11.x + Bootstrap 5 admin Dashboard template

Gull is a modern, responsive, and feature-rich admin dashboard template built with Laravel 11.x and Bootstrap 5. This template is designed to help developers create professional, intuitive, and user-friendly admin interfaces for web applications.

Buy Gull HTML

© 2019 - 2026 UI Lib

All rights reserved