bootstrap tutorial - How to change the default width of Bootstrap modal box - bootstrap examples - bootstrap templates - bootstrap 3
Answer: Set width for .modal-dialog element
By default, Bootstrap modal are available in three different sizes — default, small and large. However, if you still want to customize the size of the modal window you can override the CSS width property of the .modal-dialog class to resize the default modal. Similarily, you can override the width property of .modal-sm and .modal-lg class to resize the small and large modal box respectively. Here's an example:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Resizing the Bootstrap Modal - Wikitechy</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<link rel="stylesheet" href="css/bootstrap-theme.min.css">
<script src="https://code.jquery.com/jquery-1.11.2.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<style type="text/css">
@media screen and (min-width: 768px) {
.modal-dialog {
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 class="bs-example">
<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Default Modal</a>
<!-- Modal HTML -->
<div id="myModal" 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, I Understand</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>click below button to copy the code. By - Bootstrap tutorial - team
As you can see in the above example the modal classes are placed inside the CSS media query so that modal resizing is only applicable when the viewport has a certain width to accommodate the modal window. When setting the custom width for the modal you have to keep in mind that it should be greater than the viewport width.
