How to set twitter bootstrap modal wider and higher?

Question

How to set twitter bootstrap modal wider and higher?

Example here (please click: Launch demo modal):

http://twitter.github.com/bootstrap/javascript.html#modals

Solution 1

If your modal id is "myModal "

You could try adding a style like:

#myModal 
{
    width: 700px; 
    margin-top: -300px !important;
    margin-left:  -350px !important; 
} 

#myModal .modal-body {
    max-height: 525px;
}

Solution 2

In Bootstrap 3.1.1 they added modal-lg and modal-sm classes. You control the modal size using @media queries like they do. This is a more global way of controlling the modal size.

@media (min-width: 992px) {
    .modal-lg {
        width: 900px;
        height: 900px; /* control height here */
    }
}

Sample code:

<!-- Large modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg">Large modal</button>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

<!-- Small modal -->
<button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm">Small modal</button>

<div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      ...
    </div>
  </div>
</div>

Solution 3

The easiest way to do this is to use the .modal-lg. Add it to the modal-dialog class within the modal container like so:

<div class="modal fade">
    <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                I am now wider!
            </div>
    </div>
</div>

Solution 4

For a size in %, you could do this:

.modal-body
{
   max-height:80%;
}
.modal
{
   height:80%;
   width:70%;
   margin-left: -35%; 
}
@media (max-width: 768px) {
   .modal
   {
    width:90%;
        margin-left: 2%; 
   }
}

Solution 5

altering class model-dialog did the trick for me

.modal-dialog {
    width: 90%;
}

View more solutions

Comments

[mamasi]

#myModal: style="width:700px; margin: -250px 0 0 -525px;" tabindex="-1" AND .modal-body: style="max-height: 525px;" How to set my modal in the middle of the screen? (now it is on the left)

[Mate]

Updated! Calculate approximately half the width... margin: -300px 0px 0px -350px .

[Tigerman55]

This was good, except you need to put brackets after the media query in the CSS.

[Ismael]

I do not believe margin-top is the solution, perhaps you mispeled for margin-left

[Austin Mullins]

No, the margin-top definition moves the element higher on the page, as indicated by naming the class "higherWider".

[Sébastien Gicquel]

Hello, why not target directly the class .modal-dialog ?

[Bohdan Kuts]

But maybe modal-lg mast be added to div with class modal and not to modal-dialog? Because, I am using Bootstrap 3.3.5 and only when I add modal-lg to div.modal I get larger modal automatically (without additional styling).

[Peter Chaula]

@BohdanKuts please check again.