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

Answer 1

Rather than using percentages to make the modal responsive, I find there can be more control taken from using the columns and other responsive elements already built into bootstrap.

---

To make the modal responsive/the size of any amount of columns:

1) Add an extra div around the modal-dialog div with a class of .container -

2) Add a little CSS to make the modal full width -

.modal-dialog {
    width: 100% }

3) Alternatively add in an extra class if you have other modals -

    

    


.modal-responsive.modal-dialog {
    width: 100% }

4) Add in a row/columns if you want various sized modals -

  

    

      

       ...