6

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>
2
  • And adding the the modal-lg class doesn't work or it's too wide for you?
    – IndieRok
    Aug 8, 2016 at 16:05
  • Adding <div class="modal-dialog modal-lg" role="document"> didn't result in any change for me. The size was same.
    – John
    Aug 8, 2016 at 16:20

5 Answers 5

9

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

1
  • working fine but it is not responsive Oct 8, 2021 at 8:44
3

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!

1
0

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; }
}
0

Just use id:

#myDialog {
    width:80%;
}
0

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"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.