changing the default width of bootstrap modal - html

Question

I am trying to change the default width of the dialog but it's not working.I have tried solutions mentioned in this post. Here is my HTML code below:
<style>
#myDialog .modal-dialog{
width:80%;
}
</style>
<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>

Answer 1

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

Answer 2

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!

Answer 3

I always suggest to work with non-built files, working with sources you can take benefits from variables, mixins and, when needed, add/modify some default behaviour not explicitly exposed...
so, going to https://github.com/twbs/bootstrap/blob/v4.0.0-alpha.3/scss/_modal.scss you can see where sizes are defined and add/edit them as you need...
// example
#include media-breakpoint-up(lg) {
.modal-extralg { max-width: $modal-lg * 2; }
}

Answer 4

Just use id:
#myDialog {
width:80%;
}

Answer 5

If you using bootstrap 4+, there are default optional sizes,
check this
You can make modal-md, modal-lg in different grid sizes
Example:
div class="modal-dialog modal-xl modal-dialog-centered" role="document"