Trying to make bootstrap modal wider

Question

I am using this code but the modal is too thin    lt div class  modal fade bs-example-modal-lg custom-modal  tabindex  -1  role  dialog  aria-labelledby  myModal  aria-hidden  true  id  myModal  gt       lt div class  modal-dialog modal-lg  gt           lt div class  modal-content modal-lg  gt               lt div class  modal-header modal-lg  gt                   lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt                   lt h4 class  modal-title  gt Solutions lt  h4 gt               lt  div gt               lt div class  modal-body modal-lg  gt                   lt p gt Content lt  p gt               lt  div gt           lt  div gt       lt  div gt   lt  div gt    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

User · Answer

If you need this solution for only few types of modals just use style="width:90%" attribute.

example:

div class="modal-dialog modal-lg" style="width:90%"

note: this will change only this particular modal

User · Answer

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   lt div class  modal-dialog modal-xl  gt    Demo  http   jsbin com yefas 1

User · Answer

You could try    modal modal-wide  modal-dialog     width  90       modal-wide  modal-body     overflow-y  auto      Just add  modal-wide to your classes

[twitter-bootstrap] Trying to make bootstrap modal wider

Examples related to twitter-bootstrap

[twitter-bootstrap] Trying to make bootstrap modal wider

Examples related to twitter-bootstrap

Examples related to modal-dialog