The Demo
The Code
Output
<!DOCTYPE html> <html> <head> <title>A simple Bootstrap modal example</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script> <style> .modal-dialog { width: 360px; height:600px !important; } .modal-content { /* 80% of window height */ height: 60%; background-color:#BBD6EC; } .modal-header { background-color: #337AB7; padding:16px 16px; color:#FFF; border-bottom:2px dashed #337AB7; } </style> </head> <body> <div class="container"> <h1>Bootstrap Modal with custom size</h1> <!-- Button trigger modal --> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> Launch Modal window </button> <!-- Modal --> <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Custom height and width</h4> </div> <div class="modal-body"> A demo of changing the width of modal window <br /> For that, the width is specified in the modal-dialog class <br /> The header is also customzied.<br /><hr /> The height is specified in the <strong>.modal-content</strong> class. </div> <div class="modal-footer"> <button type="button" class="btn btn btn-primary" data-dismiss="modal">OK</button> <button type="button" class="btn btn btn-success" data-dismiss="modal">Save</button> <button type="button" class="btn btn-warning" data-dismiss="modal">Cancel</button> </div> </div> </div> </div> </body> </html>
Bootstrap Modal with custom size
Launch Modal window
×
Custom height and width
A demo of changing the width of modal window
For that, the width is specified in the modal-dialog class
The header is also customzied.
The height is specified in the
.modal-content
class.