How to configure modal width in Bootstrap?
Bootstrap Modal: It is a dialog window that opens inside the browser window on triggering certain events. It is a really convenient way to improve the website’s content rendering as per the requirements.
In this article, we will focus on adjusting the width/height of the modal box.
Method 1: Using pre-defined Bootstrap classes
Bootstrap has pre-defined classes for changing modal dimension attributes to be used with the div element containing .modal-dialog. These are listed below:
- Small-sized modal: .modal-sm
- Medium-sized modal: .modal-md
- Large-sized modal: .modal-lg
html
<!-- Small Bootstrap Modal Example --><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= /> <script src= </script> <script src= </script> </head> <body> <div class="container-fluid"> <h2>Small Modal</h2> <p> Other classes mentioned above are also implemented in the same manner. </p> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" > Open Small-modal </button> <!-- Modal Code --> <div class="modal fade" id="modal" role="dialog"> <div class="modal-dialog modal-sm"> <!-- .modal-sm here makes a small modal Can be replaced with '.modal-md' & '.modal-lg' --> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h4 class="modal-title">GeeksforGeeks</h4> </div> <div class="modal-body"> <p>GeeksforGeeks - A computer science portal for geeks</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal" > Close </button> </div> </div> </div> </div> </div> </body></html> |
Output:
Method 2: Using custom dimensions by tampering with default CSS attributes
We can also customize the width/height of the modal by changing the CSS properties for the div containing .modal-dialog class. Below is the solution for the same.
Solution:
html
<!-- Changing CSS properties for the div containing '.modal-dialog' class --><!DOCTYPE html><html lang="en"> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1" /> <link rel="stylesheet" href= /> <script src= </script> <script src= </script> <style> .custom { width: 600px; min-height: 400px; } </style> </head> <body> <div class="container-fluid"> <h2>Custom-sized Modal</h2> <p> We are changing CSS properties of div containing the '.modal-dialog' to do the same. </p> <button type="button" class="btn btn-success" data-toggle="modal" data-target="#modal" > Open Custom-sized modal </button> <!-- Modal Code --> <div class="modal fade" id="modal" role="dialog"> <div class="modal-dialog"> <!-- '.custom' class added here to do the same --> <div class="modal-content custom"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> × </button> <h4 class="modal-title">GeeksforGeeks</h4> </div> <div class="modal-body"> <p>GeeksforGeeks - A computer science portal for geeks</p> </div> </div> </div> </div> </div> </body></html> |
Output:
.png)