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

I tried the following:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

And this Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

The result is not what I expected. The modal top left is positioned in the center of the screen.

Can anyone help me. Has anyone else tried this. I assume it's not an unusual thing to want to do.

Solution 1:

UPDATE:

In bootstrap 3 you need to change the modal-dialog. So in this case you can add the class modal-admin in the place where modal-dialog stands.

Original Answer (Bootstrap < 3)

Is there a certain reason you're trying to change it with JS/jQuery?

You can easily do it with just CSS, which means you don't have to do your styling in the document. In your own custom CSS file, you add:

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

In your case:

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

The reason I put body before the selector is so that it takes a higher priority than the default. This way you can add it to an custom CSS file, and without worries update Bootstrap.

Solution 2:

If you want to make it responsive with just CSS, use this:

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Note 1: I used a .large class, you could also do this on the normal .modal

Note 2: In Bootstrap 3 the negative margin-left may not be needed anymore (not confirmed personally)

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Note 3: In Bootstrap 3 and 4, there is a modal-lg class. So this may be sufficient, but if you want to make it responsive, you still need the fix I provided for Bootstrap 3.

In some application fixed modals are used, in that case you could try width:80%; left:10%; (formula: left = 100 - width / 2)