Bootstrap 4 Components


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.