Bootstrap 4 Modal


Basic Modal

A modal is a dialog box/popup window that is located on the top side of the page. To use it, then you add to .modal class.

Example code

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#demo">
Open
</button>
<div class="modal" id="demo">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">
Modal Example
</h4>
<button class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
This is example text.
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Modal Sizes

Small Modal

If you want to make the modal dialog in Bootstrap smaller, add the .modal-sm class with the .modal-dialog class.

Example code

<div class="modal-dialog modal-sm">

Large Modal

If you want to make the modal dialog in Bootstrap Large, add the .modal-lg class with the .modal-dialog class.

Example code

<div class="modal-dialog modal-lg">

Extra Large Modal

If you want to make the modal dialog in Bootstrap Extra Large, add the .modal-xl class with the .modal-dialog class.

Example code

<div class="modal-dialog modal-xl">

Modal With Animation

If you want to add an animation or effect to the modal, add the .fade class with the .modal.

Example code

<div class="modal fade" id="demo4">

Centered Modal

If you want to see the modal dialog along the middle of the display, you need to add the .modal-dialog-centered class.

Example code

<div class="modal-dialog modal-dialog-centered">

Scrollable Modal

If the modal dialog is to be made scrollable, then the .modal-dialog-scrollable class must be added to the .modal-dialog class.

Example code

<div class="modal-dialog modal-dialog-scrollable">