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!