× {{alert.msg}} Never ask again
Get notified about new tutorials RECEIVE NEW TUTORIALS

How to set twitter bootstrap modal more wider and higher?

Leniel Macaferi
Feb 02, 2015
<p>In <a href="http://getbootstrap.com/javascript/#modals-sizes">Bootstrap 3.1.1</a> they added <code>modal-lg</code> and <code>modal-sm</code> classes. You control the <code>modal</code> size using <code>@media</code> queries like they do. This is a more global way of controlling the <code>modal</code> size.</p> <pre><code>@media (min-width: 992px) .modal-lg { width: 900px; height: 900px; /* control height here */ } </code></pre> <p>Sample code:</p> <pre><code>&lt;!-- Large modal --&gt; &lt;button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-lg"&gt;Large modal&lt;/button&gt; &lt;div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true"&gt; &lt;div class="modal-dialog modal-lg"&gt; &lt;div class="modal-content"&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; &lt;!-- Small modal --&gt; &lt;button class="btn btn-primary" data-toggle="modal" data-target=".bs-example-modal-sm"&gt;Small modal&lt;/button&gt; &lt;div class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true"&gt; &lt;div class="modal-dialog modal-sm"&gt; &lt;div class="modal-content"&gt; ... &lt;/div&gt; &lt;/div&gt; &lt;/div&gt; </code></pre> <p>This tip was originally posted on <a href="http://stackoverflow.com/questions/14919862/How%20to%20set%20twitter%20bootstrap%20modal%20more%20wider%20and%20higher?/22333051">Stack Overflow</a>.</p>

Get New Tutorials Delivered to Your Inbox

New tutorials will be sent to your Inbox once a week.

comments powered by Disqus