John John - 3 months ago 25
CSS Question

changing the default width of bootstrap modal

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

Here is a JSFiddle that may help you: http://jsfiddle.net/h3WDq/1603/

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) */ 
}

Hope this helps you!

Comments