How to increase Bootstrap Modal Width

Question

i ve tried this but gone wrong  here s the css  body  modal-ku   width  750px      and here s the failed result

User · Answer

I know this is old  but to anyone looking  you now need to set the max-width property   modal-1000       max-width  1000px      margin  30px auto

User · Answer

In my case   Giving a static width to the modal hurts the responsiveness  The modal-lg class was not wide enough   so the solution was  media  min-width  1200px        modal-xlg         width  90            and use the above class instead of modal-lg class

User · Answer

In Bootstrap  the default width of modal-dialog is 600px  But you can explicitly change its width  For instance  if you would like to maximize its width to the value of your choice  800px for instance  you do as following    modal-dialog       width  800px      margin  30px auto      Note  This change sets to all modal dialog you use in your application  Also  my suggestion is it is best to have your own CSS rules defined and not to touch the core of the framework   If you only want it to be set for specific modal dialog  use your own catchy class name as modal-800 whose width is set to 800px  as following   HTML   lt div class  modal  gt      lt div class  modal-dialog modal-800  gt         lt div class  modal-content  gt          lt  div gt      lt  div gt   lt  div gt    CSS   modal-dialog modal-800       width  800px      margin  30px auto      Likewise  you can have class name as based on the width size like modal-700 whose width is 700px   Hope it s helpful

User · Answer

I suppose this happens due to the max-width of a modal being set to 500px and max-width of modal-lg is 800px I suppose setting it to auto will make your modal responsive

User · Answer

I had a large grid that needed to be displayed in the modal and just applying the width on body was not working correctly as table was overflowing though it had bootstrap classes on it  I ended up applying same width on modal-body and modal-content     lt  --begin  Modal-- gt   lt div class  modal fade  role  dialog  aria-labelledby    aria-hidden  true  gt       lt div class  modal-dialog modal-lg modal-dialog-centered  role  document  gt           lt div class  modal-content  style  width 980px   gt               lt div class  modal-header  gt                   lt h5 class  modal-title  id    gt Title lt  h5 gt                   lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt                       lt span aria-hidden  true  class  la la-remove  gt  lt  span gt                   lt  button gt               lt  div gt               lt form class  m-form m-form--fit m-form--label-align-right  gt                   lt div class  modal-body  style  width 980px   gt                   lt  div gt                   lt div class  modal-footer  gt                       lt button type  button  class  btn btn-brand m-btn  data-dismiss  modal  gt Close lt  button gt                    lt  div gt               lt  form gt           lt  div gt       lt  div gt   lt  div gt    lt  --end  Modal-- gt

User · Answer

If you want to keep the modal responsive use   of width instead of pixels  You can do it in-line  see below  or with CSS    lt div class  modal fade  id  phpModal  role  dialog  gt               lt div class  modal-dialog modal-lg  style  width 80    gt                   lt div class  modal-content  gt                       lt div class  modal-header  gt                           lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt                           lt h4 class  modal-title  gt HERE YOU TITLE lt  h4 gt                       lt  div gt                       lt div class  modal-body helpModal phpModal  gt                          HERE YOUR CONTENT                      lt  div gt                   lt  div gt               lt  div gt           lt  div gt    If you use CSS  you can even do different   for modal-sm and modal-lg

User · Answer

The easiest way can be inline style on modal-dialog div     lt div class  modal  id  myModal  gt      lt div class  modal-dialog  style  width 1250px   gt         lt div class  modal-content  gt                            lt  div gt        lt  div gt    lt  div gt

User · Answer

your modal       width  800px      margin-left  -400px        margin left s value is half of modal s width  I m using this with Maruti Admin theme since it doesn t has class  modal-lg  modal-sm

User · Answer

go to the modal-dialog div and add  style  quot width 70  quot   depending on the size you want

User · Answer

Actually  you are applying CSS on modal div   you have to apply CSS on  modal-dialog   For example  see the following code    lt div class  modal  id  myModal  gt    lt div class  modal-dialog  style  width xxxpx   gt   lt  -- Set width of div which you want -- gt         lt div class  modal-content  gt             Lorem Ipsum some text   content            lt  div gt        lt  div gt    lt  div gt    Bootstrap also provides classes for setting div width   For small modal use modal-sm  And for large modal modal-lg

User · Answer

In Bootstrap 3 you need to change the modal-dialog  So  in this case  you can add the class modal-admin in the place where modal-dialog stands    media  min-width  768px       modal-dialog       width  600      margin  30px auto         modal-content       -webkit-box-shadow  0 5px 15px rgba 0  0  0   5               box-shadow  0 5px 15px rgba 0  0  0   5          modal-sm       width  300px

User · Answer

n your code  for the modal-dialog div  add another class  modal-lg    use modal-xl

User · Answer

You can choose between modal-lg and modal-xl classes or if you want custom width then  set max-width property with inline css  For example    lt div class  modal-dialog modal-xl  role  document  gt    or   lt div class  modal-dialog  style  max-width  80    role  document  gt

User · Answer

The simplest way to do it is       modal-dialog   css  width    80       where we can specify the width of the modal in terms of percentage of the screen   Here is a working example to demonstrate the same    x000D   x000D   lt  DOCTYPE html gt  x000D   lt html lang  en  gt  x000D   lt head gt  x000D     lt title gt Bootstrap Example lt  title gt  x000D     lt meta charset  utf-8  gt  x000D     lt meta name  viewport  content  width device-width  initial-scale 1  gt  x000D     lt link rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 3 4 1 css bootstrap min css  gt  x000D     lt script src  https   ajax googleapis com ajax libs jquery 3 4 1 jquery min js  gt  lt  script gt  x000D     lt script src  https   maxcdn bootstrapcdn com bootstrap 3 4 1 js bootstrap min js  gt  lt  script gt  x000D     lt script type  text javascript  gt  x000D      document  ready function      x000D          modal-dialog   css  width    90     x000D        x000D     lt  script gt  x000D   lt  head gt  x000D   lt body gt  x000D   x000D   lt div class  container  gt  x000D     lt h2 gt Modal Example lt  h2 gt  x000D     lt  -- Trigger the modal with a button -- gt  x000D     lt button type  button  class  btn btn-info btn-lg  data-toggle  modal  data-target   myModal  gt Open Modal lt  button gt  x000D   x000D     lt  -- Modal -- gt  x000D     lt div class  modal fade  id  myModal  role  dialog  gt  x000D       lt div class  modal-dialog  gt  x000D       x000D         lt  -- Modal content-- gt  x000D         lt div class  modal-content  gt  x000D           lt div class  modal-header  gt  x000D             lt button type  button  class  close  data-dismiss  modal  gt  amp times  lt  button gt  x000D             lt h4 class  modal-title  gt Modal Header lt  h4 gt  x000D           lt  div gt  x000D           lt div class  modal-body  gt  x000D             lt p gt Some text in the modal  lt  p gt  x000D           lt  div gt  x000D           lt div class  modal-footer  gt  x000D             lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt  x000D           lt  div gt  x000D         lt  div gt  x000D         x000D       lt  div gt  x000D     lt  div gt  x000D     x000D   lt  div gt  x000D   x000D   lt  body gt  x000D   lt  html gt  x000D   x000D   x000D

User · Answer

default dialog size is 500px  If you want your dialog look large than default size than you should add class  quot modal-dialog modal-lg modal-dialog-centered quot   you can see the difference

User · Answer

In your code  for the modal-dialog div  add another class  modal-lg    lt div class  modal-dialog modal-lg  gt    Or if you wanna centre your modal dialog  use    modal-ku     width  750px    margin  auto

User · Answer

I have also faced the same issue when increasing the width of the modal  the modal is not displaying in the centre  After playing around  I found the below solution   modal-dialog       max-width  850px      margin  2rem auto     Upvote if this works for you  Happy Coding

[html] How to increase Bootstrap Modal Width?

Examples related to html

Examples related to css

Examples related to twitter-bootstrap-3