Bootstrap 4 Modal

Welcome to The Coding College! A Modal in Bootstrap 4 is a dialog box or popup window that is displayed on top of the current page. It’s perfect for presenting alerts, forms, or additional content without navigating away from the main page.

In this guide, we’ll cover the essentials of Bootstrap 4 Modals, including how to create, customize, and enhance them for your projects.

What is a Bootstrap 4 Modal?

A Bootstrap Modal is a responsive and accessible dialog box that includes support for:

  • Headers, body content, and footers.
  • Trigger buttons for opening and closing the modal.
  • Customizable styles and behaviors.

Basic Modal Setup

Here’s the minimal code to create a modal in Bootstrap 4:

Example: Basic Modal

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Modal</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container mt-5">  
    <h2>Basic Bootstrap Modal</h2>  

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

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

  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>  
</body>  
</html>

Key Classes and Attributes

  1. .modal: The wrapper element for the modal.
  2. .modal-dialog: The dialog box container.
  3. .modal-content: The main content of the modal.
  4. .modal-header, .modal-body, .modal-footer: Define the header, content, and footer areas of the modal.
  5. data-toggle="modal": Triggers the modal when attached to a button or link.
  6. data-target="#modalID": Links the trigger to a specific modal by its id.

Advanced Features

1. Large and Small Modals

You can change the size of a modal using the .modal-lg or .modal-sm classes inside the .modal-dialog.

<div class="modal-dialog modal-lg" role="document">  
  <div class="modal-content">  
    <!-- Modal content here -->  
  </div>  
</div>  

<div class="modal-dialog modal-sm" role="document">  
  <div class="modal-content">  
    <!-- Modal content here -->  
  </div>  
</div>

2. Scrollable Modal Content

Add .modal-dialog-scrollable to make the modal body scrollable if the content exceeds the modal height.

<div class="modal-dialog modal-dialog-scrollable" role="document">  
  <div class="modal-content">  
    <!-- Modal content here -->  
  </div>  
</div>

3. Vertically Centered Modal

To center a modal vertically on the page, use the .modal-dialog-centered class.

<div class="modal-dialog modal-dialog-centered" role="document">  
  <div class="modal-content">  
    <!-- Modal content here -->  
  </div>  
</div>

4. Static Backdrop

To prevent the modal from closing when the user clicks outside it, use the data-backdrop="static" attribute.

<div class="modal fade" id="myModal" data-backdrop="static" tabindex="-1" role="dialog">  
  <div class="modal-dialog" role="document">  
    <div class="modal-content">  
      <!-- Modal content here -->  
    </div>  
  </div>  
</div>

5. Disabling Keyboard Escape

To disable closing the modal with the Escape key, add data-keyboard="false".

<div class="modal fade" id="myModal" data-backdrop="static" data-keyboard="false" tabindex="-1" role="dialog">  
  <div class="modal-dialog" role="document">  
    <div class="modal-content">  
      <!-- Modal content here -->  
    </div>  
  </div>  
</div>

Customizing with CSS

To style your modal, override Bootstrap’s default styles using CSS. For example:

/* Custom Modal Styles */  
#myModal .modal-header {  
  background-color: #007bff;  
  color: white;  
}  

#myModal .modal-footer {  
  justify-content: center;  
}

JavaScript Methods

Bootstrap Modals also include JavaScript methods for dynamic control:

Open a Modal

$('#myModal').modal('show');

Close a Modal

$('#myModal').modal('hide');

Toggle a Modal

$('#myModal').modal('toggle');

Conclusion

Bootstrap 4 Modals are powerful tools for creating dynamic, responsive dialogs. Whether you’re designing alerts, forms, or complex interfaces, modals can enhance the user experience.

Leave a Comment