Trying to make bootstrap modal wider

Question

I am using this code but the modal is too thin:

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">     <div class="modal-dialog modal-lg">         <div class="modal-content modal-lg">             <div class="modal-header modal-lg">                 <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>                 <h4 class="modal-title">Solutions</h4>             </div>             <div class="modal-body modal-lg">                 <p>Content</p>             </div>         </div>     </div> </div> 

This is what it looks like:

How can I make that modal much wider? Ideally I'd like it to be around double that width as it is too skinny at the moment.

Answer 1

Always have handy the un-minified CSS for bootstrap so you can see what styles they have on their components, then create a CSS file AFTER it, if you don't use LESS and over-write their mixins or whatever

This is the default modal css for 768px and up:

@media (min-width: 768px) {   .modal-dialog {     width: 600px;     margin: 30px auto;   }   ... } 

They have a class modal-lg for larger widths

@media (min-width: 992px) {   .modal-lg {     width: 900px;   } } 

If you need something twice the 600px size, and something fluid, do something like this in your CSS after the Bootstrap css and assign that class to the modal-dialog.

@media (min-width: 768px) {   .modal-xl {     width: 90%;    max-width:1200px;   } } 

HTML

<div class="modal-dialog modal-xl"> 

Demo: http://jsbin.com/yefas/1