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: