Bootstrap 4 Components
Modal
You must have come across a window that pops up taking all the focus and the rest of the screen is dimmed out This is a modal dialog box. Bootstrap allows us to create a modal dialog box
Creating a modal needs a .modal
class along with various other .modal-*
classes.
A Simple Modal
Create a simple modal by using the class .modal. The modal will appear when clicked on the button, sliding from the top of the browser window.
Long Contents in a Modal
When the contents of the modal is a long text that is not contained in the browser window, the scroll of the page is taken away from the <body>
of the page and to the modal.
Remove Animation
Remove the .fade
class to remove the fading effect from the modal when clicked on the button.
Modal Size
Modal can be smaller or larger depending on the modifier classes used with .modal
and .modal-dialog
.