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

If you want something that does not break the relative design try this:

body .modal {
  width: 90%; /* desired relative width */
  left: 5%; /* (100%-width)/2 */
  /* place center */
  margin-left:auto;
  margin-right:auto; 
}

As, @Marco Johannesen says, the "body" before the selector is so that it takes a higher priority than the default.

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.

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

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)