How to change the default width of a Twitter Bootstrap modal window

By | July 16, 2015

How to change the default width of a Twitter Bootstrap modal window

In twitter Bootstrap the modal window can be easily developed by adding the role=”dialog” tag to a div element.

Modals have two optional sizes, available via modifier classes to be placed on a .modal-dialog.

1. modal-lg // for larger modal windows
2. modal-sm // for smaller modal windows

But to customize the width of the modal dialog we can use css or jquery. In this tutorial let’s see how we can change the default width of a Twitter Bootstrap modal window,

To do this we can use the below css class

body .modal {
width: 560px; // custom width
margin-left: -280px; // must be half of the width, minus scrollbar on the left (30px)
}
or by setting percentage
body .modal {
width: 80%; //custom width
margin-left:-40%; // half of the width
}

In the css class the body tag is added to the selector because it will take a high priority then the default one.

In bootstrap 3:
We don’t need to add left margin it will calculated automatically

Hence for bootstrap 3 we can use the following css

/*Bootstrap 3*/
.modal .modal-dialog { width: 800px; } or
.modal .modal-dialog { width: 80%; }

🔥0

Leave a Reply