HTML CSS examples for Bootstrap:Modal
Change the Default Width of Modal Box
<!DOCTYPE html> <html> <head> <title>Example of Resizing the Bootstrap Modals</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <style type="text/css"> @media screen and (min-width: 768px) { .modal-dialog {<!-- w w w . j a va2 s . c om--> 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> <div class="alert alert-info"> <a href="#" class="close" data-dismiss="alert">×</a> </div> <a href="#defaultModal" class="btn btn-lg btn-primary" data-toggle="modal">Show Default Modal</a> <a href="#smallModal" class="btn btn-lg btn-primary" data-toggle="modal">Show Small Modal</a> <a href="#largeModal" class="btn btn-lg btn-primary" data-toggle="modal">Show Large Modal</a> <!-- Default Modal HTML --> <div id="defaultModal" 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">×</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</button> </div> </div> </div> </div> <!-- Small Modal HTML --> <div id="smallModal" class="modal"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Small Modal</h4> </div> <div class="modal-body"> <p>The small modal size has been changed. Now it is 50px wider than previous 300px wide modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">Ok</button> </div> </div> </div> </div> <!-- Large Modal HTML --> <div id="largeModal" class="modal"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title">Large Modal</h4> </div> <div class="modal-body"> <p>The large modal size has been changed. Now it is 50px wider than previous 900px wide modal.</p> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button> </div> </div> </div> </div> </div> </body> </html>