Skip to content
Related Articles

Related Articles

Improve Article
Save Article
Like Article

How to configure modal width in Bootstrap?

  • Last Updated : 06 Sep, 2021

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




<!-- Small Bootstrap Modal Example -->
<!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>
      <!-- Modal Code -->
      <div class="modal fade" id="modal" role="dialog">
        <div class="modal-dialog modal-sm">
          <!-- .modal-sm here makes a small modal
       Can be replaced with '.modal-md' & '.modal-lg'
    -->
          <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




<!-- Changing CSS properties for the div 
containing '.modal-dialog' class -->
<!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>
  
      <!-- Modal Code -->
      <div class="modal fade" id="modal" role="dialog">
        <div class="modal-dialog">
          <!-- '.custom' class added here to do the same -->
          <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
 

 




My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!