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

Answer 1

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

    

        

            

                ×
                
Text
            
            

                This is some text.
            
            

                This is some text.
            
        

    

CSS

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