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
<!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 >
< div class = "modal fade" id = "modal" role = "dialog" >
< div class = "modal-dialog modal-sm" >
< 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
<!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 >
< div class = "modal fade" id = "modal" role = "dialog" >
< div class = "modal-dialog" >
< 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:

Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape,
GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out -
check it out now!