changing the default width of bootstrap modal
Override the .modal-dialog width
.modal-dialog{
width: 80%;
margin: auto;
}
Place this piece of code in after the bootstrap.min.css to override its default width.
Here is working fiddle
Here is a JSFiddle that may help you: Working JSFiddle
When CSS style is added on the class .modal instead of .modal-dialog, you can then simply change the width of the modal as you want by the following code:
.modal{
width: 80%; /* respsonsive width */
margin-left:-40%; /* width/2) */
}
$(function() {
$("#myDialog").modal("show");
});.modal-dialog {
width: 80%;
margin: auto;
}
.modal{
width: 80%; /* respsonsive width */
margin-left:-40%; /* width/2) */
}<div id="myDialog" class="modal fade" tabindex="-1" role="dialog">
<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"><i class="fa fa-times"></i></button>
<div class="modal-title" id="Dialog_title">Text Document</div>
</div>
<div class="modal-body">
<div id="my_doc_content"></div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="rg.closeDialog('myDialog');">Close</button>
</div>
</div>
</div>
</div>Hope this helps you!