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

Answer 1

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)