CODEWITHSUNDEEP
cssmodal-dialog
JMA
JMA

Reputation: 994

Change width and height of the modal in Bootstrap

I want to change the width and height of the modal in Bootstrap. How can I set the max-width of modal to 900px? How can I set max-height of modal to screenheight minus the padding:20px.

I used this code,

.modal-dialog {
    width: 100%;
    max-width: 900px;
    height: calc(100vh - 40px);
}

But it is not working.

It must be vertically and horizontally centered.

Upvotes: 0

Views: 706

Answers (1)

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167162

Since already the modal window is positioned relative, you can just use this:

.modal-dialog {
  width: auto;
  height: auto;
  position: fixed;
  top: 10px;
  left: 10px;
  bottom: 10px;
  right: 10px;
}

.modal-dialog .modal-content {
  height: 100%;
}

The above CSS will make the modal to be in fixed position and makes it look in the offset of 10px from the four sides.

Output: http://output.jsbin.com/kepuximasi

Upvotes: 1

Related Questions