Signup/Sign In

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.

small size modal

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.



About the author: