Modal
Use Bootstrap’s JavaScript modal plugin to add dialogs to your site for lightboxes, user notifications, or completely custom content
Basic Modal
Toggle a modal via JavaScript by clicking the button above. You can use modal to add dialogs to your site for lightboxes, user notifications, or completely custom content.
BorderLess Modal
Toggle a Boderless via JavaScript by clicking the button above. Use
.modal-borderless with .modalfor BorderLess modal.
Vertically Centered
Add .modal-dialog-centered to .modal-dialog to vertically center the modal.
Disabled Backdrop
You can disable the backdrop by using data-bs-backdrop="false"
Modal Themes
Use class .bg-* with your .modal-header to change theme of modal
Modal Sizes
Add class .modal-{sm|lg|xl|full} with .modal-dialog to create a modal with different size.
Modal with Login Form
Created Simple Login Form.
Scrolling long Content
If your content is longer you the page will autmatically adopt a scrollbar
Scrolling long Content Inside Modal
You can also create a scrollable modal that allows scroll the modal body by adding
.modal-dialog-scrollable to .modal-dialog.
Disabled Animation
For modals that simply appear rather than fade in to view, remove the .fade class from your modal markup.