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=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css"
    />
    <script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
    </script>
    <script src=
"https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">
    </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">
                &times;
              </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: