❮ Bootstrap5 Utilities Bootstrap5 Container ❯

Bootstrap5 Modal

A modal is a child window that is overlaid on the parent window. Typically, the purpose is to display content from a separate source that can include some interaction without leaving the parent window. The child window can provide information interactions, etc.

How to Create a Modal

The following example creates a simple modal effect:

Example

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal">
  Open Modal
</button>

<!-- 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 Title</h4>
        <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
      </div>

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

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

    </div>
  </div>
</div>

Adding Animation

Using the .fade class can set the modal to have a pop-up or close effect:

Example

<!-- Adding Animation Effect -->
<div class="modal fade"></div>

<!-- Without Animation Effect -->
<div class="modal"></div>

Modal Sizes

We can create a small modal by adding the .modal-sm class, and a large modal by adding the .modal-lg class.

The size classes are placed after the .modal-dialog class in the <div> element:

Example - Small Modal

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

Example - Large Modal

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

Example - Extra-Large Modal

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

Full Screen Display

Using the .modal-fullscreen class can make the modal display full screen:

Example - Full Screen Display

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

Using the .modal-fullscreen-*-* classes can control the full-screen display at specific sizes:

Class	Description	Example
.modal-fullscreen-sm-down	Full screen below 576px	Try it
.modal-fullscreen-md-down	Full screen below 768px	Try it
.modal-fullscreen-lg-down	Full screen below 992px	Try it
.modal-fullscreen-xl-down	Full screen below 1200px	Try it
.modal-fullscreen-xxl-down	Full screen below 1400px	Try it

Centered Modal

Using the .modal-dialog-centered class can set the modal to be centered both horizontally and vertically:

Example

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

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

Modal Scrollbar

By default, if a modal contains a lot of content, the page will automatically generate a scrollbar, and the modal will scroll with the page:

Example

<div class="modal-dialog">

If we want to set a scrollbar only within the modal, we can use the .modal-dialog-scrollable class:

Example

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

❮ Bootstrap5 Utilities Bootstrap5 Container ❯