Bootstrap 4 Modal

Bootstrap 4 Modal

The Modal component is a dialog box/popup window that is displayed on top of the current page:

How To Create a Modal

The following example shows how to create a basic modal:


<!-- Button to Open the Modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
  Open modal

<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>

Try it Yourself »

Add animation

Use the .fade class to add a fading effect when opening and closing the modal:


<!-- Fading modal -->
<div class="modal fade"></div>

<!-- Modal without animation -->
<div class="modal"></div>
Try it Yourself »

Modal Size

Change the size of the modal by adding the .modal-sm class for small modals or  .modal-lg class for large modals.

Add the size class to the <div> element with class .modal-dialog:

Small Modal

<div class="modal-dialog modal-sm">
Try it Yourself »

Large Modal

<div class="modal-dialog modal-lg">
Try it Yourself »

By default, modals are medium in size.

Centered Modal

Center the modal vertically and horizontally within the page, with the .modal-dialog-centered class:


<div class="modal-dialog modal-dialog-centered">
Try it Yourself »

Complete Bootstrap Modal Reference

For a complete reference of all modal options, methods and events, go to our Bootstrap JS Modal Reference.