bootstrap_ref_js_modal

The Modal plugin is a flexible dialog prompt or popup window that is displayed on top of the current page. It requires Bootstrap’s JavaScript (bootstrap.bundle.min.js or individual files including modal.js and its dependencies like Popper for positioning).

For a step-by-step tutorial about Modals, read our Bootstrap Modal Tutorial.

Class	Description
.modal	The main container for the modal. Usually hidden by default.
.modal-dialog	Sets the proper width and margin of the modal. Can be combined with sizing classes.
.modal-content	Styles the modal with border, background-color, etc. This is the container for the modal’s header, body, and footer.
.modal-header	Defines the style for the header of the modal. Typically contains a title and a close button.
.modal-title	Class for the modal’s title text within the `.modal-header`.
.btn-close	A generic close button, often used in modals and alerts.
.modal-body	Defines the style for the body of the modal, where the main content goes.
.modal-footer	Defines the style for the footer of the modal. Often contains action buttons.
.modal-sm	Used with `.modal-dialog` for a small modal.
.modal-lg	Used with `.modal-dialog` for a large modal.
.modal-xl	Used with `.modal-dialog` for an extra-large modal.
.modal-fullscreen	Makes the modal span the entire viewport. Can be responsive (e.g., `.modal-fullscreen-sm-down`).
.fade	Adds a fade-in and fade-out animation effect to the modal.

You can toggle a modal without writing any JavaScript. Set data-bs-toggle="modal" on a controller element, like a button, along with a data-bs-target="#myModal" or href="#myModal" to target a specific modal to toggle.

Note: For <a> elements, you can use href="#modalID" instead of data-bs-target, but data-bs-target is generally preferred for clarity with JavaScript components.

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

<!-- Link to trigger modal -->
<a href="#myModal" data-bs-toggle="modal">Open Modal with Link</a>

<!-- Other element to trigger modal -->
<p data-bs-toggle="modal" data-bs-target="#myModal" style="cursor:pointer; color:blue;">Click here to open Modal</p>

<!-- The Modal -->
<div class="modal fade" id="myModal" tabindex="-1" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="myModalLabel">Modal Title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        This is the modal body content.
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

Trigger Via JavaScript

Enable modals manually with JavaScript:

// Get the modal element
var myModalElement = document.getElementById('myModal');

// Create a new modal instance
var myModal = new bootstrap.Modal(myModalElement, {
  keyboard: false // Optional: disable closing with Esc key
});

// To show the modal
// myModal.show();

// To hide the modal
// myModal.hide();

// To toggle the modal
// myModal.toggle();

Options can be passed via data attributes (e.g., data-bs-backdrop="static") or JavaScript. For data attributes, append the option name to data-bs-.

Name	Type	Default	Description
backdrop	boolean or the string `'static'`	true	Includes a modal-backdrop element. Alternatively, specify `static` for a backdrop which doesn’t close the modal on click.
keyboard	boolean	true	Closes the modal when escape key is pressed.
focus	boolean	true	Puts the focus on the modal when initialized.
show	boolean	true	Deprecated. Use JavaScript method `.show()` instead. Shows the modal when initialized. (This option is from older Bootstrap versions; in BS5, modals are hidden by default and shown via triggers or JS `.show()`).

The following table lists all available modal methods. They are called on the modal instance (e.g., myModalInstance.toggle()).

Method	Description
`.Modal(options)` or `new bootstrap.Modal(element, options)`	Activates your content as a modal. Accepts an optional options object.
`.toggle()`	Manually toggles a modal. Returns to the caller before the modal has actually been shown or hidden.
`.show()`	Manually opens a modal. Returns to the caller before the modal has actually been shown.
`.hide()`	Manually hides a modal. Returns to the caller before the modal has actually been hidden.
`.handleUpdate()`	Manually readjusts the modal’s position if its height changes while it is open (e.g. if a scrollbar appears).
`.dispose()`	Destroys an element’s modal. (Removes event listeners and data attributes).

Bootstrap’s modal class exposes a few events for hooking into modal functionality. All modal events are fired at the modal itself (i.e. at the <div class="modal">).

Event	Description
`show.bs.modal`	This event fires immediately when the `show` instance method is called. If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
`shown.bs.modal`	This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the `relatedTarget` property of the event.
`hide.bs.modal`	This event is fired immediately when the `hide` instance method has been called.
`hidden.bs.modal`	This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete).
`hidePrevented.bs.modal`	This event is fired when the modal is shown, its backdrop is `static` and a click outside the modal or an escape key press is performed with the keyboard option set to `false`.

The following example creates a modal for a login form. Note the use of Bootstrap form controls and layout utilities. Icons like user, lock, eye would typically be added using an icon library (e.g., Bootstrap Icons, Font Awesome) or SVGs.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Bootstrap Login Modal</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
  <!-- Optional: Add Bootstrap Icons (or another icon library) -->
  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.0/font/bootstrap-icons.css"> -->
  <style>
    .modal-header h4 .bi { /* Example for Bootstrap Icons */
        margin-right: 0.5rem;
    }
  </style>
</head>
<body>

<div class="container mt-5">
  <h2>Modal Login Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-primary btn-lg" data-bs-toggle="modal" data-bs-target="#loginModal">
    Login
  </button>

  <!-- The Modal -->
  <div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h4 class="modal-title" id="loginModalLabel" style="color: #0d6efd;">
            <!-- Example: <i class="bi bi-lock-fill"></i> Login -->
            Login
          </h4>
          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">
          <form role="form">
            <div class="mb-3">
              <label for="usrname" class="form-label">
                <!-- Example: <i class="bi bi-person-fill"></i> Username -->
                Username
              </label>
              <input type="email" class="form-control" id="usrname" placeholder="Enter email">
            </div>
            <div class="mb-3">
              <label for="psw" class="form-label">
                <!-- Example: <i class="bi bi-eye-fill"></i> Password (use appropriate icon) -->
                Password
              </label>
              <input type="password" class="form-control" id="psw" placeholder="Enter password">
            </div>
            <div class="form-check mb-3">
              <input class="form-check-input" type="checkbox" value="" id="rememberMe" checked>
              <label class="form-check-label" for="rememberMe">
                Remember me
              </label>
            </div>
            <button type="submit" class="btn btn-success w-100">
              <!-- Example: <i class="bi bi-box-arrow-in-right"></i> Login -->
              Login
            </button>
          </form>
        </div>
        <div class="modal-footer justify-content-between">
          <div>
            <button type="button" class="btn btn-danger" data-bs-dismiss="modal">
              <!-- Example: <i class="bi bi-x-circle"></i> Cancel -->
              Cancel
            </button>
          </div>
          <div>
            <p class="mb-0">Not a member? <a href="#">Sign Up</a></p>
            <p class="mb-0">Forgot <a href="#">Password?</a></p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

bootstrap_ref_js_modal

Bootstrap JS Modal

JS Modal (modal.js)

The Modal Plugin Classes

Trigger the Modal Via data-bs-* Attributes

Trigger Via JavaScript

Modal Options

Modal Methods

Modal Events

Login Modal Example