How to change Bootstrap Modal Width and Height – 3 Examples

Changing Bootstrap modal size properties

In order to increase or decrease the modal window height and width 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 and height of the modal window.

A demo of changing the width of modal window

For 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.

Change Bootstrap modal height and width with min/max icons

In this example, the jQuery code is used for creating a modal with min/max options. As minimize icon is clicked, the modal will resize towards the left bottom.

Along with this, the modal height and width properties are also changed than default. This is again done by using the .modal-dialog class where width and height of the overall modal are set.

Besides, the .modal-content class is also used for setting the content area. Have a look at the demo and code:

height width modal

See online demo and code

You will need to adjust height property in .modal-content class as per the content in the modal.

How to set up this modal for your website?

In order to setup this modal with modified height and width, follow these steps.

Step 1: 

Place the dependency file in the <head> section of the web page:

<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js”></script>

<!– font Awesome 4.5.0 –>
<link href=”css/modal-minimize-and-maximize/font-awesome.css” rel=”stylesheet” type=”text/css” />

Step 2:

The CSS for this demo:

Step 3:

The HTML

Step 4:

Finally, place this jQuery code above the </body> tag:

 

Learn more about this plug-in with other demos in its tutorial by following this link: Minimize/maximize Bootstrap modal.

So, even if you are using a third party modal that is based on Bootstrap framework, you may still change the size of modals by overriding the properties mentioned in this tutorial.