How to change the default width of Bootstrap modal box

Answer: Set width for `.modal-dialog` element

By default, Bootstrap modal are available in four different sizes — small, default, large and extra-large. However, if you still want to customize the size of the modal window you can override the CSS width property of the .modal-dialog class to resize the default modal.

Similarly, you can override the width property of .modal-sm, .modal-lg and .modal-xl class to resize the small, large and extra-large modal dialog box respectively.

The following example will show you how to change the width of default modal.

Example

Try this code »

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Resizing the Bootstrap Modal</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.5.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style>
    @media screen and (min-width: 676px) {
        .modal-dialog {
          max-width: 600px; /* New width for default modal */
        }
    }
</style>
</head>
<body>
<div class="m-4">
    <!-- Button HTML (to Trigger Modal) -->
    <a href="#defaultModal" class="btn btn-lg btn-primary" data-toggle="modal">Show Default Modal</a>
    
    <!-- Default Modal HTML -->
    <div id="defaultModal" class="modal">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                  	<h5 class="modal-title">Default Modal</h5>
                	<button type="button" class="close" data-dismiss="modal">×</button>
                </div>
                <div class="modal-body">
                    <p>The default modal size has been changed to 600px. Now it is 100px wider than the previous 500px wide modal.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary" data-dismiss="modal">Ok, I Understand</button>
                </div>
            </div>
        </div>
    </div>
</div>     
</body>
</html>

As you can see in the above example the modal classes are placed inside the CSS media query so that modal resizing is only applicable when the viewport has a certain width to accommodate the modal window. When setting the custom width for the modal you have to keep in mind that it should not be greater than the viewport width otherwise horizontal scrollbar may occur.

Related FAQ

Here are some more FAQ related to this topic:

Previous Page Next Page

How to change the default width of Bootstrap modal box

Answer: Set width for .modal-dialog element

Example

Related FAQ

About Us

Contact

Interactive Tools

Answer: Set width for `.modal-dialog` element