How to configure modal width in Bootstrap?

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
filter_none

edit
close

play_arrow

link
brightness_4
code

<!-- 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>

chevron_right






                        filter_none








Output:




Method 2: Using custom dimensions by tampering with default CSS attibutes

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:











                                    filter_none




                                    edit

                                    close




                                    play_arrow




                                    link

                                    brightness_4

                                    code
                                




















<!-- 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> 



















                        chevron_right







                        filter_none








Output:







    

        My Personal Notes
        arrow_drop_up
    

    

        
        

            
            
        

    


Recommended Posts:
Aditya_Thakur
Check out this Author's contributed articles.
If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.
Please Improve this article if you find anything incorrect by clicking on  the "Improve Article" button below.