How to configure modal width in Bootstrap? - GeeksforGeeks

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">                ×              </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="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>    <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:  
 
singghakshay
Bootstrap-Misc
Picked
Technical Scripter 2019
Bootstrap
Technical Scripter
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Comments
Old Comments
How to set Bootstrap Timepicker using datetimepicker library ?
How to Show Images on Click using HTML ?
How to Use Bootstrap with React?
How to keep gap between columns using Bootstrap?
Tailwind CSS vs Bootstrap
Roadmap to Become a Web Developer in 2022
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?