How can I change the default width of a Twitter Bootstrap modal box?

Answer 1

Bootstrap 3: In order to maintain responsive features for small and extra small devices I did the following:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}

Answer 2

This is what I did, in my custom.css I added these lines and that was all.

.modal-lg {
    width: 600px!important;
    margin: 0 auto;
}

Obviously, you can change the size of the width.

Answer 3

I used SCSS, and the fully responsive modal:

.modal-dialog.large {
    @media (min-width: $screen-sm-min) { width:500px; }
    @media (min-width: $screen-md-min) { width:700px; }
    @media (min-width: $screen-lg-min) { width:850px; }
} 

Answer 4

If Bootstrap>3, Just add style to your modal.

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

Answer 5

If you're using Bootstrap 3, you need to change the modal-dialog div and not the modal div like it is shown in the accepted answer. Also, to keep the responsive nature of Bootstrap 3, it's important to write the override CSS using a media query so the modal will be full width on smaller devices.

See this JSFiddle to experiment with different widths.

HTML

<div class="modal fade">
    <div class="modal-dialog custom-class">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h3 class="modal-header-text">Text</h3>
            </div>
            <div class="modal-body">
                This is some text.
            </div>
            <div class="modal-footer">
                This is some text.
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

Answer 6

I used this way, and it's work perfect for me

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});