PUBLISHED ON: AUGUST 10, 2021
How to change the default width of Bootstrap modal box?
Answer: using .modal-dialog class
The modals in Bootstrap are used to add dialogs for user notification or other things. The modals come with medium default width. But we can change the default width of the modal box using Bootstrap 5.
The modals in Bootstrap 5 have three optional sizes, available via modifier classes. It should be placed on a .modal-dialog.
|
size
|
class
|
modal max-width
|
|
small
|
.modal-sm
|
300px
|
|
Default
|
None
|
500px
|
|
large
|
.modal-lg
|
800px
|
|
Extra large
|
.modal-xl
|
1140px
|
The modal has the default medium width. These sizes kick at certain breakpoints to avoid horizontal scrollbars.
Example: Create a small size modal in Bootstrap 5
Here is an example, where we have created a small size modal by adding .modal-sm class to .modal-dialog .
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet" >
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" ></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.1/dist/js/bootstrap.min.js" integrity="sha384-Atwg2Pkwv9vp0ygtn1JAojH0nYbwNJLPhwyoVbhoPwBhjQPR5VtM2+xf0Uwh9KtT" crossorigin="anonymous"></script>
</head>
<body>
<h2> Click to lunch small size modal </h2>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- adding small size modal -->
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
</body>
</html>
Output
Here is the output of the above program.
Fullscreen Modals
There is yet another set of modifier classes that is used to pop up a modal that covers the entire screen. This modifier class are also placed on .modal-dialog.
| class |
Availability |
.modal-fullscreen |
Always |
.modal-fullscreen-sm-down |
Below 576px |
.modal-fullscreen-md-down |
Below 768px |
.modal-fullscreen-lg-down |
Below 992px |
.modal-fullscreen-xl-down |
Below 1200px |
.modal-fullscreen-xxl-down |
Below 1400px |
Example: Add full screen modal
In this example, we have added full screen modal.
Conclusion
In this tutorial, we have used the Bootstrap 5 modifier class to change the width of the modal dialog box. There is some modifier class for fullscreen modals at the different breakpoints.
