Modal width increase

Question

I want a modal to be 80  or so of a screen width  modal-lg isn t large enough  This    modal  modal-dialog     width  80       Doesn t work with Bootstrap 4

User · Answer

So i have been struggling too on the same issue. The quick and easiest way to solve the problem is by just adding

modal-lg on your modal Div

Example <div class="modal-dialog modal-lg">

User · Answer

Set max-width 80   as an inline stylesheet  lt div class  quot modal-dialog modal-lg quot  role  quot document quot  style  quot max-width  80   quot  gt

User · Answer

In Bootstrap 4 you have to use  max-width  attribute and then it works perfectly    lt div id  modal dialog  class  modal fade  tabindex  -1  role  dialog  style  display  none   gt   lt div class  modal-dialog  style  max-width  1350px important   role  document  gt       lt div class  modal-content  gt           lt div class  modal-body  gt              Sample text          lt  div gt       lt  div gt   lt  div gt

User · Answer

Bootstrap 4 includes sizing utilities  You can change the size to 25 50 75 100  of the page width  I wish there were even more increments    To use these we will replace the modal-lg class  Both the default width and modal-lg use css max-width to control the modal s width  so first add the mw-100 class to effectively disable max-width  Then just add the width class you want  e g  w-75   Note that you should place the mw-100 and w-75 classes in the div with the modal-dialog class  not the modal div e g      lt div class  modal-dialog mw-100 w-75  gt           lt  div gt

User · Answer

The following solution will work for Bootstrap 4    modal  modal-dialog     max-width  850px

User · Answer

try to use px   modal  modal-dialog     width  850px      just change the size

User · Answer

This was the solution that worked for me    x000D   x000D   modal  x000D   padding  0  important  x000D    x000D   modal-dialog   x000D    max-width  80   important  x000D    height  100   x000D    padding  0  x000D    margin  0  x000D    x000D   x000D   modal-content   x000D    border-radius  0  important  x000D    height  100   x000D    x000D   lt script src  https   code jquery com jquery-3 2 1 slim min js  gt  lt  script gt  x000D   lt script src  https   maxcdn bootstrapcdn com bootstrap 4 0 0 js bootstrap min js  gt  lt  script gt  x000D   lt link href  https   maxcdn bootstrapcdn com bootstrap 4 0 0 css bootstrap min css  rel  stylesheet    gt  x000D   lt a href     class  menu-toggler  data-toggle  modal  data-target   bd-example-modal-lg  gt Menu lt  a gt  x000D   x000D   lt div class  modal mobile-nav-modal fade bd-example-modal-lg  tabindex  -1  role  dialog  aria-labelledby  myLargeModalLabel  aria-hidden  true  gt  x000D     lt div class  modal-dialog modal-lg  gt  x000D       lt div class  modal-content  gt  x000D         lt a href     class    data-dismiss  modal  gt Close Menu lt  a gt  x000D   x000D         lt nav class  modal-nav  gt  x000D           lt ul gt  x000D             lt li gt  lt a data-toggle  collapse  href   collapseExample  role  button  gt Shop lt  a gt  x000D               lt div class  collapse  id  collapseExample  gt  x000D                 lt ul gt  x000D                   lt li gt  lt a href     gt List 1 lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt List 2 lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt List 3 lt  a gt  lt  li gt  x000D                 lt  ul gt  x000D                 lt ul gt  x000D                   lt li gt  lt a href     gt List 1 lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt List 2 lt  a gt  lt  li gt  x000D                   lt li gt  lt a href     gt List 3 lt  a gt  lt  li gt  x000D                 lt  ul gt  x000D               lt  div gt  x000D             lt  li gt  x000D             lt li gt  lt a href     gt Made To Order lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Heritage lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Style  amp  Fit lt  a gt  lt  li gt  x000D             lt li gt  lt a href     gt Sign In lt  a gt  lt  li gt  x000D           lt  ul gt  x000D         lt  nav gt  x000D       lt  div gt  x000D     lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Make sure your modal is not placed in a container  try to add the  important annotation if it s not changing the width from the original one

User · Answer

Bootstrap 3  You can create or just override default bootstrap modal-lgby doing below    modal-lg       max-width  80       If not working just add  important so it would look like below   modal-lg       max-width  80   important      Now call the modal-lg    lt div class  modal-dialog modal-lg  role  document  gt    lt  -- some modal content --- gt   lt  div      For Bootstrap 4 refer to  kitsu eb answer  Also note that using bootstrap 4 utilities might break the responsiveness

User · Answer

Simply Use  important after giving width of that class that is override your class   For Example    modal  modal-dialog     width  850px  important      Hopefully this will works for you

User · Answer

Try this  This was the solution that worked for me    lt div class  modal-dialog  style  min-width  1500px  role  document  gt

User · Answer

If you use Sass   according to the documentation you can customize your default values   In your case  you can easily override the variable named  modal-lg in your  custom scss file

User · Answer

For responsive answer    media  min-width  992px       modal-dialog       max-width  80

[bootstrap-4] Modal width (increase)

Examples related to bootstrap-4

[bootstrap-4] Modal width (increase)

Examples related to bootstrap-4

Examples related to bootstrap-modal