Bootstrap 5 Modal Tutorial: Building Beautiful, Responsive and Accessible Modals

Bootstrap 5 has brought a lot of changes to the table, but one of the most notable is the updates to the modal component. Bootstrap 5 modals are even more flexible, powerful and customizable than before, making them an essential tool in any web developer’s toolkit.

In this comprehensive Bootstrap 5 modal tutorial, we will go over everything you need to know about implementing modals in your projects, from the basics to the more advanced features.

What is a Modal in Bootstrap?

A modal is a popup window that appears on top of the current page, typically used to display additional content or to prompt the user to take an action. In Bootstrap 5, modals are built using a combination of HTML, CSS and JavaScript, and are designed to be flexible, customizable and accessible.

In order to create a modal, you first need to include the necessary code in your project. This can be done by either downloading the Bootstrap 5 CSS and JS files, or by using a CDN to include them in your HTML file.

Once you have the Bootstrap files set up, you can start building your modal by creating the necessary HTML markup. Here is a basic example:

<div class="modal" tabindex="-1">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title">Modal title</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Modal content goes here.</p>
      </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>

This code creates a basic modal with a header, body and footer. The data-bs-dismiss attribute on the close button allows the user to dismiss the modal by clicking the button or pressing the escape key.

Bootstrap 5 Modal Options

Bootstrap 5 modals offer a variety of options that allow you to customize the appearance and behavior of your modals. Here are some of the most important options:

Sizes

Bootstrap 5 offers four different modal sizes: small, large, extra-large and full-screen. You can apply a size by adding the appropriate class to the .modal-dialog element:

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

Positioning

By default, modals are centered vertically and horizontally on the page. You can change the vertical alignment by adding the class .modal-dialog-scrollable to the .modal-dialog element, which allows the modal to scroll vertically if the content exceeds the height of the viewport.

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

Backdrop

The backdrop is the dark overlay that appears behind the modal. You can control its behavior by adding the data-bs-backdrop attribute to the .modal element:

• false: disables the backdrop entirely
• static: disables closing the modal by clicking outside of it
• true: enables the default behavior, which dismisses the modal when the backdrop is clicked

<div class="modal" tabindex="-1" data-bs-backdrop="static">

Keyboard

By default, modals can be dismissed by pressing the escape key. You can disable this behavior by adding the data-bs-keyboard attribute to the .modal element:

<div class="modal" tabindex="-1" data-bs-keyboard="false">

Animation

Bootstrap 5 modals use CSS transitions to animate the opening and closing of the modal. You can customize the animation by adding the fade class to the .modal element, which will fade in and out the modal:

<div class="modal fade">

Accessibility

Bootstrap 5 modals are designed to be accessible, and include important accessibility features like ARIA attributes and keyboard navigation. However, it’s important to make sure your modals are fully accessible by following best practices for web accessibility.

Bootstrap 5 Modal Methods

In addition to the options listed above, Bootstrap 5 modals also offer a variety of methods that can be used to control the modal programmatically. Here are some of the most useful methods:

Show and Hide

The show method can be used to show a modal:

var myModal = new bootstrap.Modal(document.getElementById('myModal'))
myModal.show()

Similarly, the hide method can be used to hide a modal:

myModal.hide()

Toggle

The toggle method can be used to toggle the visibility of a modal:

myModal.toggle()

Dispose

The dispose method can be used to remove a modal from the DOM:

myModal.dispose()

Events

Bootstrap 5 modals also offer a variety of events that allow you to trigger functions at certain points in the lifecycle of the modal. Here are some of the most useful events:

• show.bs.modal: fired immediately when the modal is shown
• shown.bs.modal: fired after the modal is fully shown (includes CSS transitions)
• hide.bs.modal: fired immediately when the modal is hidden
• hidden.bs.modal: fired after the modal is fully hidden (includes CSS transitions)

You can listen for these events using jQuery or vanilla JavaScript:

$('#myModal').on('shown.bs.modal', function () {
  // do something when the modal is fully shown
})

document.getElementById('myModal').addEventListener('hide.bs.modal', function () {
  // do something when the modal is about to be hidden
})

Bootstrap 5 Modal Examples

Bootstrap 5 modals are incredibly versatile, and can be used in a wide variety of contexts. Here are some examples of how you can use modals in your projects:

Login Form

A modal can be used to display a login form to the user, without requiring them to navigate to a separate page:

<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#loginModal">
  Login
</button>

<div class="modal fade" id="loginModal" tabindex="-1" aria-labelledby="loginModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="loginModalLabel">Login</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <form>
          <div class="mb-3">
            <label for="username" class="form-label">Username</label>
            <input type="text" class="form-control" id="username" aria-describedby="usernameHelp">
            <div id="usernameHelp" class="form-text">We'll never share your username with anyone else.</div>
          </div>
          <div class="mb-3">
            <label for="password" class="form-label">Password</label>
            <input type="password" class="form-control" id="password">
          </div>
        </form>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
        <button type="button" class="btn btn-primary">Login</button>
      </div>
    </div>
  </div>
</div>

Image Gallery

A modal can be used to display a larger version of an image when the user clicks on a thumbnail:

<div class="image-gallery">
  <a href="#" data-bs-toggle="modal" data-bs-target="#imageModal">
    <img src="thumbnail.jpg">
  </a>
</div>

<div class="modal fade" id="imageModal" tabindex="-1" aria-labelledby="imageModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered modal-xl">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <img src="fullsize.jpg" class="w-100">
      </div>
    </div>
  </div>
</div>

Confirmation Dialog

A modal can be used to confirm an action before it is executed:

<button type="button" class="btn btn-danger" data-bs-toggle="modal" data-bs-target="#deleteModal">
  Delete
</button>

<div class="modal fade" id="deleteModal" tabindex="-1" aria-labelledby="deleteModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="deleteModalLabel">Delete Item?</h5>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        <p>Are you sure you want to delete this item?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">No</button>
        <button type="button" class="btn btn-danger">Yes, Delete It</button>
      </div>
    </div>
  </div>
</div>

Conclusion

Bootstrap 5 modals are an essential component for any web developer, allowing you to create beautiful, responsive and accessible popup windows that can display additional content or prompt the user to take an action. By following the guidelines and examples outlined in this tutorial, you’ll be able to create modals that will enhance the user experience on your website or application.

📕 Related articles about HTML

• How to Style HTML Forms: Achieve an Extraordinary User Experience
• How to create your own web page using HTML
• How to Create a CSS File for HTML: A Comprehensive Guide
• How to Integrate JavaScript with HTML and CSS
• How to Create a Navbar in HTML and CSS
• How to Create a Simple HTML Page with Image