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.

In bootstrap 3 I just use `modal-lg` and `modal-sm` classes to have large and small modals. You can also overrite the `.modal-lg` in your css. — claudios, Mar 20 '17 at 06:08

claudios · Accepted Answer · 2019-06-13T04:03:25.803

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.

<div class="modal-dialog modal-lg" role="document">
 <!-- some modal content --->
</div

For Bootstrap 4 refer to @kitsu.eb answer. Also note that using bootstrap 4 utilities might break the responsiveness.

score 111 · Answer 2 · edited Mar 04 '22 at 16:34

111

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.,

<div class='modal-dialog mw-100 w-75'>
    ...
</div>

Also, we can even use the well known container class (instead of specifying the size), like:

<div class="modal-dialog mw-100">
    <div class="modal-content container">
        <div class="modal-body">
            ...
        </div>
    </div>
</div>

edited Mar 04 '22 at 16:34

Top-Master

7,611
5
39
71

answered Jul 05 '18 at 15:16

kitsu.eb

2,996
1
26
28

16

This is the real answer. – MECU Sep 13 '18 at 02:23
1

But is this responsive? I changed for a modal window, but for the mobile window it's retaining the class. a modal-lg won't do that i think – Alan Pallath Oct 24 '18 at 07:50
1

@AlanPallath Any use of the width classes potentially breaks responsiveness. There was a proposal for responsive width classes (ex. `w-lg-100`), but the bootstrap maintainers didn't want to add them. – kitsu.eb Oct 24 '18 at 16:14
1

Yea, I thought so. Hence a `@media (min-width: 992px)` helped me solve the issue instead of this one. Thanks anyway. – Alan Pallath Oct 26 '18 at 10:55
This fails on small (xs) screens – Anil P Babu Feb 22 '22 at 02:55

score 26 · Answer 3 · answered Oct 25 '17 at 07:36

26

For responsive answer.

@media (min-width: 992px) {
  .modal-dialog {
    max-width: 80%;
  }
}

answered Oct 25 '17 at 07:36

Joel Enanod Jr

649
9
19

this is correct answer, answer from kitsu.eb breaks the modal in xs sizes, thanks @Joel – tomhre Jun 26 '20 at 09:56

score 9 · Answer 4 · answered May 28 '18 at 06:40

In Bootstrap 4 you have to use 'max-width' attribute and then it works perfectly.

<div id="modal_dialog" class="modal fade" tabindex="-1" role="dialog" style="display: none;">
<div class="modal-dialog" style="max-width: 1350px!important;" role="document">
    <div class="modal-content">
        <div class="modal-body">
            Sample text
        </div>
    </div>
</div>

score 3 · Answer 5 · answered Mar 20 '17 at 06:19

3

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.

answered Mar 20 '17 at 06:19

Unknown_Coder

764
6
24

it is working but is not responsive, for iPhone it is not working – Sapna Dorbi Oct 08 '21 at 10:01

score 3 · Answer 6 · answered Jun 14 '18 at 17:54

This was the solution that worked for me:

.modal{
 padding: 0 !important;
}
.modal-dialog {
  max-width: 80% !important;
  height: 100%;
  padding: 0;
  margin: 0;
}

.modal-content {
  border-radius: 0 !important;
  height: 100%;
}

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<a href="#" class="menu-toggler" data-toggle="modal" data-target=".bd-example-modal-lg">Menu</a>

<div class="modal mobile-nav-modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <a href="#" class="" data-dismiss="modal">Close Menu</a>

      <nav class="modal-nav">
        <ul>
          <li><a data-toggle="collapse" href="#collapseExample" role="button">Shop</a>
            <div class="collapse" id="collapseExample">
              <ul>
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li><a href="#">List 3</a></li>
              </ul>
              <ul>
                <li><a href="#">List 1</a></li>
                <li><a href="#">List 2</a></li>
                <li><a href="#">List 3</a></li>
              </ul>
            </div>
          </li>
          <li><a href="#">Made To Order</a></li>
          <li><a href="#">Heritage</a></li>
          <li><a href="#">Style & Fit</a></li>
          <li><a href="#">Sign In</a></li>
        </ul>
      </nav>
    </div>
  </div>
</div>

score 2 · Answer 7 · answered Mar 20 '17 at 06:11

2

try to use px

.modal .modal-dialog {
  width: 850px;
}

just change the size.

answered Mar 20 '17 at 06:11

mjishigh

73
8

score 1 · Answer 8 · answered Mar 20 '17 at 06:08

1

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.

answered Mar 20 '17 at 06:08

Elie Nassif

464
4
11

score 1 · Answer 9 · answered Jul 07 '17 at 18:02

1

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.

answered Jul 07 '17 at 18:02

s.a.filko

21
3

score 1 · Answer 10 · answered Aug 06 '19 at 10:53

1

The following solution will work for Bootstrap 4.

.modal .modal-dialog {
  max-width: 850px;
}

answered Aug 06 '19 at 10:53

Asra Fud Duha

511
5
9

score 1 · Answer 11 · edited Feb 28 '20 at 02:29

1

Try this, This was the solution that worked for me:

<div class="modal-dialog" style="min-width: 1500px" role="document">

edited Feb 28 '20 at 02:29

claudios

6,588
8
47
90

answered Feb 19 '20 at 09:54

repsajg

11
1

score 0 · Answer 12 · edited Aug 03 '20 at 08:29

0

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">

edited Aug 03 '20 at 08:29

Dharman

30,962
25
85
135

answered Aug 03 '20 at 08:23

John Elias Kwandikwa

13
2

score 0 · Answer 13 · edited Jan 20 '21 at 08:02

0

Set max-width:80%; as an inline stylesheet

<div class="modal-dialog modal-lg" role="document" style="max-width: 80%;">

edited Jan 20 '21 at 08:02

Sabito stands with Ukraine

4,271
8
34
56

answered Jan 20 '21 at 06:06

Sathish Kumar

41
3

score 0 · Answer 14 · answered Dec 15 '21 at 12:25

You can use a combination of absolute and relative units

.modal-dialog-xw {
  margin-left: auto;
  margin-right: auto;
  min-width: 330px;    /* To prevent shrinking of very small screens (Galaxy S9 for example) */
  max-width: 75%;      /* To use 75% of the width available. Or set in pixels if need. */
}

In html code add after .modal-dialog

<div class="modal-dialog modal-dialog-xw" role="document">...</div>

Modal width (increase)

14 Answers14

Linked