This tutorial explains all about Bootstrap 4 Modal Popup. Learn to create Bootstrap 4 Modals including creating, positioning, adding various contents, etc.:
In this tutorial, we have covered an introduction to Bootstrap Modals, how to create a basic modal using data attributes, modal components, scrolling modals, centered modals, small modals, default size modal, large modal, extra-large modal, activate modals via JavaScript, modals with an animation, adding various content to modals.
We have also listed few frequently asked questions about Bootstrap 4 modals. Please note that we have used Bootstrap version 4 in all examples.
=> Visit Here To Learn Bootstrap From Scratch
Let’s begin!
Table of Contents:
Introduction To Bootstrap 4 Modal
A modal is a dialog box or a pop-up window that appears on top of the page to show important information to the user. It is commonly used to warn users. Unlike in Bootstrap 3 modals, Bootstrap 4 rewrote the modal component with flexbox.
The following table summarizes the classes and attributes of Bootstrap 4 Modals that we have used in this tutorial.
| Class | Usage |
|---|---|
| The .modal class | This class is used to create a basic modal. |
| The .modal-dialog class | This class is used to sets the width and horizontal & vertical alignments of the modal box. |
| The .modal-content class | This class is used to add the modal's header, body, and footer. It also sets the styles such as borders, text colors, background colors, etc. |
| The .modal-dialog-centered class | This class is used to center the modal both vertically and horizontally. |
| The .modal-dialog-scrollable class | This class is used to add a scrollbar to the modal. |
| The .modal-header class | This class is used to add a header to the modal. |
| The .modal-body class | This class is used to add a body to the modal. |
| The .modal-footer class | This class is used to add a footer to the modal. |
| The .modal-sm class | This class is used to create a small modal. |
| The .modal-lg class | This class is used to create a large modal. |
| The .modal-xl class | This class is used to create an extra-large modal. |
| The .fade class | This class is used to add a fading animation effect when opening and closing the modal. |
| Attribute | Usage |
|---|---|
| The data-toggle="modal" attribute | This attribute is used on a controller element, such as a button. |
| The data-target="#modalID" attribute | This attribute is used to target a specific modal to toggle. |
| The data-dismiss="modal" attribute | This attribute is used to close the modal. |
Creating Basic Bootstrap 4 Modals
You can create a modal with or without JavaScript code. If not using JavaScript code, then you can use data attributes to activate modals. In this tutorial, we have used both data attributes and JavaScript code to create/activate modals.
Note: Please refer to the section Activate Bootstrap 4 Modals via JavaScript to learn how to activate modals via JavaScript.
The main classes used to create a basic modal are the .modal class, the .modal-dialog class, the .modal-content class, the .modal-header class, the .modal-body class and the .modal-footer class while the main data attributes used are the data-toggle=”modal” attribute, the data-target=”#modalID” attribute, and the data-dismiss=”modal” attribute.
Usually, we use a button or a link to open a modal.
Important points to remember when creating a modal:
- You need to add unique ids to the modals if you are using multiple modals on the same page.
- The value of the data-target attribute (or the href attribute for links) of the modal controller element such as buttons (or links) should match the id of the modal.
Modal Components
A typical Bootstrap modal consists of three major Bootstrap components. They are:
- The header component – Add the .modal-header class to create a modal header.
- The body component – Add the .modal-body class to create a modal body.
- The footer component – Add the .modal-footer class to create a modal footer. Adding a footer to the modal is optional.
Examples of Basic Modals
The below programming code shows an example of a basic modal (created using data attributes). You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <!-- Button to open the modal --> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"> Click Me! </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">Heading</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Modal text… </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">Close</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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshot shows the browser output of the above programming code.
Positioning Bootstrap 4 Modal
Scrolling Modals
When you add a lot of content to a modal body, the modal becomes too large. In such situations, you can add a scrollbar to the modal to prevent the modal to become too large. Add the .modal-dialog-scrollable class to the <div> element with the .modal-dialog class to add a scrollbar to a modal.
Centered Modals
Add the .modal-dialog-centered class to the <div> element with the .modal-dialog class to create a centered modal. It centers the modal both vertically and horizontally.
Examples of Scrolling Modals and Centered Modals
The below programming code shows examples of a scrolling modal and a centered modal. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <!-- Button to open the modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myScrollableModal"> Click Me! </button> <!-- Scrollable Modal --> <div class="modal" id="myScrollableModal"> <div class="modal-dialog modal-dialog-scrollable"> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <h4 class="modal-title">Scrollable Modal</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed hendrerit id augue ac efficitur. Morbi egestas pretium mollis. Suspendisse pharetra ipsum ut purus vulputate euismod. Curabitur euismod vehicula leo, eget mattis leo consequat id. Vestibulum vulputate metus id auctor tristique. Suspendisse varius suscipit mattis. Duis bibendum dignissim laoreet. Curabitur ullamcorper convallis odio, vel tempor risus. Nam odio felis, sollicitudin tincidunt velit vitae, consectetur scelerisque felis. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam elementum nisi nibh, quis bibendum dolor pretium congue. Vestibulum a ligula id felis auctor laoreet. Fusce ac pulvinar nibh. Aliquam erat volutpat.</p> <p>Duis lectus risus, varius eget lectus nec, vestibulum porta lectus. Curabitur scelerisque rutrum erat, at feugiat nisi lacinia vitae. Sed tempor quam at erat auctor vulputate. Curabitur blandit neque vel risus ultrices pharetra. Aliquam efficitur, neque eu blandit iaculis, sem lectus iaculis enim, nec dictum quam dui ut justo. Ut at lacus a diam lacinia commodo et a ligula. Integer feugiat lectus ex, id molestie ante euismod nec. Aliquam sit amet posuere est. Aliquam erat volutpat. Curabitur fermentum massa a nisi mollis imperdiet. Maecenas vestibulum, ipsum vel ultricies semper, erat eros tempor orci, in scelerisque lectus nunc scelerisque orci. Donec ultrices rhoncus urna. Donec volutpat quis sapien quis bibendum.</p> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Button to open the modal --> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myCenteredModal"> Click Me! </button> <!-- Centered Modal --> <div class="modal" id="myCenteredModal"> <div class="modal-dialog modal-dialog-centered"> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <h4 class="modal-title">Centered Modal</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> This is a centered modal. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">Close</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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshots show the browser output of the above programming code.
Scrollable Modal (The below screenshots show the browser output when the blue “Click Me!” button is clicked.)
Centered Modal (The below screenshots show the browser output when the green “Click Me!” button is clicked.)
Bootstrap 4 Modal Sizes
There are four sizes of Modals as shown in the below list:
- Small Modals
- Default size Modals (medium modals)
- Large Modals
- Extra-large Modals
Small Modals
Add the .modal-sm class to create a small modal. It has a maximum width of 300 pixels.
Default Size Modals
Default size modals are also known as Medium Modals. No need to add a specific class to create a default size modal, as it is the default size. It has a maximum width of 500 pixels.
Large Modals
Add the .modal-lg class to create a large modal. It has a maximum width of 800 pixels.
Extra Large Modals
Add the .modal-xl class to create an extra-large modal. It has a maximum width of 1140 pixels.
Examples of Modal Sizes
The below programming code shows examples of a small modal, a default size modal, a large modal, and an extra-large modal. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <!-- Button to open the modal --> <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#mySmallModal"> Click Me! </button> <!-- Small Modal --> <div class="modal" id="mySmallModal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <h4 class="modal-title">Small Modal</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Great job! You have created a small modal. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Button to open the modal --> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myDefaultModal"> Click Me! </button> <!-- Default Size Modal --> <div class="modal" id="myDefaultModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <h4 class="modal-title">Default Size Modal</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Great job! You have created a default size modal. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Button to open the modal --> <button type="button" class="btn btn-warning" data-toggle="modal" data-target="#myLargeModal"> Click Me! </button> <!-- Large Modal --> <div class="modal" id="myLargeModal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <h4 class="modal-title">Large Modal</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Great job! You have created a large modal. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-warning" data-dismiss="modal">Close</button> </div> </div> </div> </div> <!-- Button to open the modal --> <button type="button" class="btn btn-danger" data-toggle="modal" data-target="#myExtralargeModal"> Click Me! </button> <!-- Extra-large Modal --> <div class="modal" id="myExtralargeModal"> <div class="modal-dialog modal-xl"> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <h4 class="modal-title">Extra-large Modal</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Great job! You have created an extra-large modal. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" data-dismiss="modal">Close</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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshots show the browser output of the above programming code.
Small Modal (The below screenshots show the browser output when the blue “Click Me!” button is clicked.)
Default Size Modal (The below screenshots show the browser output when the green “Click Me!” button is clicked.)
Large Modal (The below screenshots show the browser output when the yellow “Click Me!” button is clicked.)
Extra-large Modal (The below screenshots show the browser output when the red “Click Me!” button is clicked.)
Bootstrap 4 Modals With Animation
Add the .fade class to the <div> element with the .modal class. It adds a fading animation effect when opening and closing the modal. When you remove this class, the modal will appear without any animation effect.
The below programming code shows an example of a modal with fading animation. You can try this example by running the below programming code.
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"> </head> <body> <div class="container mt-3"> <!-- Button to open the modal --> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal"> Click Me! </button> <!-- Modal --> <div class="modal fade" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal header --> <div class="modal-header"> <h4 class="modal-title">Fading Effect</h4> <button type="button" class="close" data-dismiss="modal">×</button> </div> <!-- Modal body --> <div class="modal-body"> Did you notice the fading effect? </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-success" data-dismiss="modal">Close</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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script> </body> </html>
The below screenshots show the browser output of the above programming code.
Activate Bootstrap 4 Modal via JavaScript
Instead of using data attributes, you can use JavaScript code to activate modals.
Example of a Modal activated via JavaScript:
The below programming code shows an example of a modal activated via JavaScript. You can try this example by running the below programming code.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css">
</head>
<body>
<div class="container mt-3">
<!-- Button to open the modal -->
<button type="button" class="btn btn-danger" id="myBtn">
Show Notice
</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">Notice</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
This is a modal activated via JavaScript.
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-primary" data-dismiss="modal">Close</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/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"></script>
<script>
$(document).ready(function(){
$("#myBtn").click(function(){
$("#myModal").modal();
});
});
</script>
</body>
</html>
The below screenshot shows the browser output of the above programming code.
Adding Various Content To Bootstrap 4 Modal
We have mainly used textual content for our modal examples. However, you can add various contents such as tooltips, popovers, grids, forms, videos, etc. to a modal.
Tip: You may try your own example Modals with tooltips, popovers, grids, forms, videos, etc.
Frequently Asked Questions
In this section, we are going to look at some of the frequently asked questions (FAQs) about Modals.
Q #1) What is a Bootstrap modal?
Answer: A Bootstrap modal is a dialog box or a popup window that shows important information to the user.
Q #2) How can you show a modal?
Answer: Use a button or a link to show a modal.
Q #3) How to make the modal bigger?
Answer: Add the .modal-lg class to make the modal bigger.
Q #4) Can you put multiple modals on a single page?
Answer: Yes, you can put multiple modals on a single page.
Q #5) How to make modal content scrollable?
Answer: Add the .modal-dialog-scrollable class to make modal content scrollable.
Q #6) How can you center a modal?
Answer: Add the .modal-dialog-centered class to center a modal.
Conclusion
A modal is a dialog box or a pop-up window that is used to show important information to the user. Usually, a modal consists of three main components named Modal header, Modal body, and Modal footer.
Bootstrap provides facilities to control other styling features such as the size of the modal, position of the modal, animation effect when opening and closing the modal, etc.
=> Check Out The Perfect Bootstrap Training Guide Here