How to change the default width of Bootstrap modal box

Topic: Bootstrap / LessPrev|Next

Answer: Set width for .modal-dialog element

By default, Bootstrap modal are available in three different sizes — default, small and 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.

Similarily, you can override the width property of .modal-sm and .modal-lg class to resize the small and large modal box respectively. Let's check out an example:

  • <!DOCTYPE html>
  • <html lang="en">
  • <head>
  • <meta charset="utf-8">
  • <title>Resizing the Bootstrap Modal</title>
  • <link rel="stylesheet" href="css/bootstrap.min.css">
  • <link rel="stylesheet" href="css/bootstrap-theme.min.css">
  • <script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
  • <script src="js/bootstrap.min.js"></script>
  • <style>
  •     @media screen and (min-width: 768px) {
  •         .modal-dialog {
  •           width: 700px; /* New width for default modal */
  •         }
  •         .modal-sm {
  •           width: 350px; /* New width for small modal */
  •         }
  •     }
  •     @media screen and (min-width: 992px) {
  •         .modal-lg {
  •           width: 950px; /* New width for large modal */
  •         }
  •     }
  • </style>
  • </head>
  • <body>
  • <div class="bs-example">
  •     <!-- Button HTML (to Trigger Modal) -->
  •     <a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Default Modal</a>
  •     <!-- Modal HTML -->
  •     <div id="myModal" class="modal">
  •         <div class="modal-dialog">
  •             <div class="modal-content">
  •                 <div class="modal-header">
  •                     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  •                     <h4 class="modal-title">Default Modal</h4>
  •                 </div>
  •                 <div class="modal-body">
  •                     <p>The default modal size has been changed. Now it is 100px wider than previous 600px 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:

Bootstrap UI Design Templates

Your Feedback:

We would love to hear from you, please drop us a line.