How to increase/decrease Bootstrap modal width and height?

Changing Bootstrap modal properties

In order to increase or decrease the modal window properties of Bootstrap, you need to get the modal related classes and use desired values either in the <style> section or in your external CSS file.

In either case, you have to use it after the reference of Bootstrap CSS file. In this tutorial, I will show you how you may change the width of the modal window.

A demo of changing the width of modal window

In this demo, the .modal-dialog class which is the built-in class of Bootstrap framework for the modal window is used in the <style> tag.

There, I simply specified the width of 360px that will override the default value. Besides, I have also changed the default header properties to change the look:

bootstrap modal custom size

See online demo and code

The CSS used in demo:


The markup:


A demo of customizing height and width of modal window

In this demo, the height of the modal window is also changed along with the width. For that, the .modal-content class is used where I defined the height in percentage.

bootstrap modal height wisth

See online demo and code

The CSS:


The markup is almost the same as in above example. Get the complete code from the demo page.