How can I change the default width of a Twitter Bootstrap modal box

Question

I tried the following       lt div class  modal hide fade modal-admin  id  testModal  style  display  none   gt           lt div class  modal-header  gt             lt a data-dismiss  modal  class  close  gt    lt  a gt             lt h3 id  dialog-heading  gt  lt  h3 gt           lt  div gt           lt div class  modal-body  gt               lt div id  dialog-data  gt  lt  div gt           lt  div gt           lt div class  modal-footer  gt             lt a data-dismiss  modal  class  btn   gt Close lt  a gt             lt a class  btn btn-primary  id  btnSaveChanges  gt Save changes lt  a gt           lt  div gt       lt  div gt    And this Javascript           modal-admin   css  width    750px            modal-admin   css  margin    100px auto 100px auto            modal-admin   modal  show     The result is not what I expected  The modal top left is positioned in the center of the screen    Can anyone help me  Has anyone else tried this  I assume it s not an unusual thing to want to do

User · Answer

In v3 of Bootstrap there is a simple method to make a modal larger  Just add the class modal-lg next to modal-dialog    lt  -- My Modal Popup -- gt   lt div id  MyWidePopup  class  modal fade  role  dialog  gt       lt div class  modal-dialog modal-lg  gt   lt ---------------------RIGHT HERE            lt  -- Modal content-- gt           lt div class  modal-content  gt

User · Answer

In Bootstrap 3 with CSS you can simply use   body  modal-dialog          percentage of page width        width  40       This ensures you don t break the design of the page  because we re using  modal-dialog instead of  modal which will be applied even to the shading

User · Answer

Bootstrap 3  In order to maintain responsive features for small and extra small devices I did the following     media  min-width  768px     modal-dialog-wide   width  750px    your width

User · Answer

Solution was taken from this page      feedback-modal   modal       backdrop  true      keyboard  true    css       width   auto        margin-left   function              return -   this  width     2

User · Answer

FYI Bootstrap 3 handles the left property automatically  So simply adding this CSS will change the width and keep it centered    modal  modal-dialog   width  800px

User · Answer

Bootstrap 3 x x      lt  -- Modal -- gt   lt div class  modal fade  id  employeeBasicDetails  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt       lt div class  modal-dialog modal-sm employeeModal  role  document  gt            lt form gt            lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  lt  button gt                   lt h4 class  modal-title  id  myModalLabel  gt Modal Title lt  h4 gt               lt  div gt                lt div class  modal-body row  gt                  Modal Body                 lt  div gt                lt div class  modal-footer  gt                    lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt               lt  div gt           lt  div gt            lt  form gt        lt  div gt   lt  div gt    Notice I added  employeeModal class in second div  Then style that class    employeeModal          width  700px

User · Answer

I used a combination of CSS and jQuery  along with hints on this page  to create a fluid width and height using Bootstrap 3    First  some CSS to handle the width and optional scrollbar for the content area   modal modal-wide  modal-dialog     width  90      modal-wide  modal-body     overflow-y  auto      And then some jQuery to adjust the height of the content area if needed      modal-wide   on  show bs modal   function       var height     window  height   - 200      this  find   modal-body   css  max-height   height         Full write-up and code at http   scottpdawson com development creating-a-variable-width-modal-dialog-using-bootstrap-3

User · Answer

I used SCSS  and the fully responsive modal    modal-dialog large        media  min-width   screen-sm-min    width 500px         media  min-width   screen-md-min    width 700px         media  min-width   screen-lg-min    width 850px

User · Answer

If you want to make it responsive with just CSS  use this    modal large       width  80      respsonsive width        margin-left -40      width 2          Note 1  I used a  large class  you could also do this on the normal  modal  Note 2  In Bootstrap 3 the negative margin-left may not be needed anymore  not confirmed personally     Bootstrap 3    modal large        width  80       Note 3  In Bootstrap 3 and 4  there is a  modal-lg class  So this may be sufficient  but if you want to make it responsive  you still need the fix I provided for Bootstrap 3    In some application fixed modals are used  in that case you could try width 80   left 10    formula  left   100 - width   2

User · Answer

Try something like the following  see live jsfiddle example here  http   jsfiddle net periklis hEThw 1     lt a class  btn  onclick        myModal   modal  show       myModal   css  width    100px   css  margin-left   auto   css  margin-right   auto     ref   myModal   gt Launch Modal lt  a gt   lt div class  modal  id  myModal  style    display none  gt     lt div class  modal-header  gt       lt a class  close  data-dismiss  modal  gt    lt  a gt       lt h3 gt Modal header lt  h3 gt     lt  div gt     lt div class  modal-body  gt       lt p gt One fine body    lt  p gt     lt  div gt     lt div class  modal-footer  gt       lt a href     class  btn  gt Close lt  a gt       lt a href     class  btn btn-primary  gt Save changes lt  a gt     lt  div gt   lt  div gt

User · Answer

This is what I did  in my custom css I added these lines and that was all     modal-lg       width  600px important      margin  0 auto      Obviously  you can change the size of the width

User · Answer

In Bootstrap 3  the most appropriate way to change the size of a modal dialog is to use the size property  Below is an example  notice the modal-sm along the modal-dialog class  indicating a small modal  It can contain the values sm for small  md for medium and lg for large    lt div class  modal fade  id  ww vergeten  tabindex  -1  role  dialog  aria-labelledby  modal title  aria-hidden  true  gt     lt div class  modal-dialog modal-sm  gt   lt  -- property to determine size -- gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt           lt h4 class  modal-title  id  modal title  gt Some modal lt  h4 gt         lt  div gt         lt div class  modal-body  gt            lt  -- modal content -- gt          lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-primary  id  some button  data-loading-text  Loading     gt Send lt  button gt         lt  div gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

Rather than using percentages to make the modal responsive  I find there can be more control taken from using the columns and other responsive elements already built into bootstrap     To make the modal responsive the size of any amount of columns    1  Add an extra div around the modal-dialog div with a class of  container -   lt div class  container  gt       lt div class  modal-dialog  gt       lt  div gt   lt  div gt     2  Add a little CSS to make the modal full width -   modal-dialog       width  100       3  Alternatively add in an extra class if you have other modals -   lt div class  container  gt       lt div class  modal-dialog modal-responsive  gt       lt  div gt   lt  div gt    modal-responsive modal-dialog       width  100       4  Add in a row columns if you want various sized modals -   lt div class  container  gt     lt div class  row  gt       lt div class  col-md-4  gt         lt div class  modal-dialog modal-responsive  gt                    lt  div gt       lt  div gt     lt  div gt   lt  div gt

User · Answer

For Bootstrap 3 here s how to do it   Add a modal-wide style to your HTML markup  as adapted from the example in the Bootstrap 3 docs    lt div class  modal fade modal-wide  id  myModal  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  aria-hidden  true  gt     lt div class  modal-dialog  gt       lt div class  modal-content  gt         lt div class  modal-header  gt           lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt           lt h4 id  myModalLabel  class  modal-title  gt Modal title lt  h4 gt         lt  div gt         lt div class  modal-body  gt           lt p gt One fine body amp hellip  lt  p gt         lt  div gt         lt div class  modal-footer  gt           lt button type  button  class  btn btn-default  data-dismiss  modal  gt Close lt  button gt           lt button type  button  class  btn btn-primary  gt Save changes lt  button gt         lt  div gt       lt  div gt  lt  --   modal-content -- gt     lt  div gt  lt  --   modal-dialog -- gt   lt  div gt  lt  --   modal -- gt    and add the following CSS   modal-wide  modal-dialog     width  80      or whatever you wish        There is no need to override margin-left in Bootstrap 3 to get this to be centered now

User · Answer

Preserve the responsive design  set the width to what you desire    modal-content     margin-left  auto    margin-right  auto    max-width  360px      Keep it simple

User · Answer

Altering the class model-dialog you can achieve expected result  These small tricks work for me  Hope it will help you to solve this issue    modal-dialog       width  70

User · Answer

With Bootstrap 3  all that is required is a percentage value given to the modal-dialog via CSS CSS  alertModal  modal-dialog       width  20

User · Answer

In Bootstrap 3 all you need is this    lt style gt       modal  modal-dialog   width  80      lt  style gt    Most of the above answers did not worked for me       x000D   x000D   lt script src  https   ajax googleapis com ajax libs jquery 1 9 1 jquery min js  gt  lt  script gt  x000D   lt script src  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 5 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   cdnjs cloudflare com ajax libs twitter-bootstrap 3 3 5 css bootstrap min css  rel  stylesheet    gt  x000D   x000D   lt style gt  x000D     myModal1  modal-dialog   x000D      width  80   x000D      x000D     myModal2  modal-dialog   x000D      width  50   x000D      x000D   lt  style gt  x000D   x000D   lt button type  button  class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal1  gt  x000D    80  x000D   lt  button gt  x000D   x000D   lt button type  button  class  btn btn-primary btn-lg  data-toggle  modal  data-target   myModal2  gt  x000D    50  x000D   lt  button gt  x000D   lt center gt  x000D     lt  -- Modal -- gt  x000D     lt div class  modal fade  id  myModal1  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt  x000D       lt div class  modal-dialog  role  document  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  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  x000D             lt  button gt  x000D             lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt  x000D           lt  div gt  x000D           lt div class  modal-body  gt  x000D            custom width   80  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 button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   x000D     lt  -- Modal -- gt  x000D     lt div class  modal fade  id  myModal2  tabindex  -1  role  dialog  aria-labelledby  myModalLabel  gt  x000D       lt div class  modal-dialog  role  document  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  aria-label  Close  gt  lt span aria-hidden  true  gt  amp times  lt  span gt  x000D             lt  button gt  x000D             lt h4 class  modal-title  id  myModalLabel  gt Modal title lt  h4 gt  x000D           lt  div gt  x000D           lt div class  modal-body  gt  x000D            custom width   50  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 button type  button  class  btn btn-primary  gt Save changes lt  button gt  x000D           lt  div gt  x000D         lt  div gt  x000D       lt  div gt  x000D     lt  div gt  x000D   x000D   lt  center gt  x000D   x000D   x000D

User · Answer

I ve found this solution that works better for me  You can use this       modal   css      width   function           return    document  width      9     px             margin-left   function           return -   this  width     2              or this depending your requirements       modal   css     width   auto      margin-left   function           return -   this  width     2             See the post where I found that  https   github com twitter bootstrap issues 675

User · Answer

If you want something that does not break the relative design try this   body  modal     width  90      desired relative width      left  5       100 -width  2         place center      margin-left auto    margin-right auto       As   Marco Johannesen says  the  body  before the selector is so that it takes a higher priority than the default

User · Answer

Less-based solution  no js  for Bootstrap 2    modal-width  modalWidth        width   modalWidth      margin-left  - modalWidth 2        media  max-width   modalWidth            position  fixed          top    20px          left   20px          right  20px          width  auto          margin  0           amp  fade    top  -100px             amp  fade in   top  20px              Then wherever you want to specify a modal width    myModal        modal-width 700px

User · Answer

I used this way  and it s work perfect for me      my-modal    modal  toggle    css   width    80     margin-left   auto    margin-right   auto    left   10

User · Answer

UPDATE   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   Original Answer  Bootstrap  lt  3   Is there a certain reason you re trying to change it with JS jQuery    You can easily do it with just CSS  which means you don t have to do your styling in the document  In your own custom CSS file  you add   body  modal          new custom width        width  560px         must be half of the width  minus scrollbar on the left  30px         margin-left  -280px      In your case   body  modal-admin          new custom width        width  750px         must be half of the width  minus scrollbar on the left  30px         margin-left  -375px      The reason I put body before the selector is so that it takes a higher priority than the default  This way you can add it to an custom CSS file  and without worries update Bootstrap

User · Answer

Size ModalSize Large   sample   using  var modal   Html Bootstrap   Begin new Modal   Id  modalProject     modelItem id  Closeable   Size ModalSize Large

User · Answer

If you re using Bootstrap 3  you need to change the modal-dialog div and not the modal div like it is shown in the accepted answer  Also  to keep the responsive nature of Bootstrap 3  it s important to write the override CSS using a media query so the modal will be full width on smaller devices   See this JSFiddle to experiment with different widths   HTML   lt div class  modal fade  gt       lt div class  modal-dialog custom-class  gt           lt div class  modal-content  gt               lt div class  modal-header  gt                   lt button type  button  class  close  data-dismiss  modal  aria-hidden  true  gt  amp times  lt  button gt                   lt h3 class  modal-header-text  gt Text lt  h3 gt               lt  div gt               lt div class  modal-body  gt                  This is some text               lt  div gt               lt div class  modal-footer  gt                  This is some text               lt  div gt           lt  div gt  lt  --   modal-content -- gt       lt  div gt  lt  --   modal-dialog -- gt   lt  div gt  lt  --   modal -- gt    CSS   media screen and  min-width  768px         custom-class           width  70      either    e g  60   or px  400px

User · Answer

Use Below Script    modal     --widthOfModal  98     width  var --widthOfModal   important    margin-left  calc calc var --widthOfModal    2     -1    important    height  92      overflow-y  scroll      Demo

User · Answer

Below is the code for set the modal pop-up width and left position from the screen through javascript       openModalPopupId   css    width    80     left    30

User · Answer

Add the following on your css file   popover           width auto  important            max-width 445px  important            min-width 200px  important

User · Answer

I solved it for Bootstrap 4 1  Mix of previously posted solutions   x000D   x000D   modal-lg   x000D    max-width  90   important     desired relative width    x000D    margin-left auto  important  x000D    margin-right auto  important  x000D    x000D   x000D   x000D

User · Answer

Achieved expected result using    modal-dialog       width  41   important

User · Answer

If Bootstrap 3  Just add style to your modal    lt div class  modal-dialog  style  width 80    gt     lt div class  modal-content  gt     lt  div gt   lt  div gt

User · Answer

you can use any prefix or postfix name for modal  but you need to make sure that s should use everywhere with same prefix postfix name       body  modal-nk              new custom width            width  560px             must be half of the width  minus scrollbar on the left  30px             margin-left  -280px          or  body  nk-modal                  new custom width                width  560px                 must be half of the width  minus scrollbar on the left  30px                 margin-left  -280px

[javascript] How can I change the default width of a Twitter Bootstrap modal box?

Examples related to javascript

Examples related to jquery

Examples related to twitter-bootstrap-2