John John - 1 year ago 104
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:


#myDialog .modal-dialog{




<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 class="modal-body">

<div id="my_doc_content"></div>

<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal" onclick="rg.closeDialog('myDialog');">Close</button>

Answer Source

Here is a JSFiddle that may help you:

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:

    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 

Hope this helps you!