Trying to make bootstrap modal wider

Question

I am using this code but the modal is too thin:

<div class="modal fade bs-example-modal-lg custom-modal" tabindex="-1" role="dialog" aria-labelledby="myModal" aria-hidden="true" id="myModal">
    <div class="modal-dialog modal-lg">
        <div class="modal-content modal-lg">
            <div class="modal-header modal-lg">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Solutions</h4>
            </div>
            <div class="modal-body modal-lg">
                <p>Content</p>
            </div>
        </div>
    </div>
</div>

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.

Danczyk

Hmm that is unusual then. Is there a way I can force the modal to be wider still then? There must be something in my CSS overriding it. – Danczyk

In my bootstrap.min.css I see this: @media screen and (min-width:768px){.modal-dialog{width:600px;margin:30px auto} - could that fixed width be causing my issue? – Danczyk

Answer 1

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

<div class="modal-dialog modal-xl">

Demo: http://jsbin.com/yefas/1

Disunion

This needs to be ".modal .modal-xl" – Bilbo

If a Legend needed to be picked for the day... you would be the pick! Thanks for the help. Placing in my boostrap.css didnt work for some reason(Maybe I did something wrong), but placing it on my razor view worked like a charm! For those that want to do the same, you need to add a double @ : @@media .... – Sphalerite

Changing from a normal sized modal to large modal made the close button not work. adding modal-xl to the modal-dialogue div fixed the problem. Thank you! – Bs

Answer 2

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

Upsurge

exactly what I needed. – Clamorous

Only thing would work for me. Changing 'modal-lg to modal-xl' made it smaller... – Serous

Answer 3

To follow up on Kryszof Ra's answer, try "min-width" instead of "width":

<div class="modal-dialog modal-lg" style="min-width:90%;">

Verified working with bootstrap 5.

Dill

Answer 4

You could try:

.modal.modal-wide .modal-dialog {
  width: 90%;
}

.modal-wide .modal-body {
  overflow-y: auto;
}

Just add .modal-wide to your classes

Dmz

Answer 5

For Bootstrap 5.1 (Nov 2021) the earlier answers did not work. You can have different sizes like this:

<div class="modal-dialog modal-xl">...</div>
<div class="modal-dialog modal-lg">...</div>
<div class="modal-dialog modal-sm">...</div>
<div class="modal-dialog modal">...</div>

If this does not suffice, you also can customise it in a relatively easy way:

Make a file in which you collect all your bootstrap custom styles, e.g. bootstrap-customisation.scss

$modal-md: 600px;
@import '../../node_modules/bootstrap/scss/bootstrap.scss';

This overwrites the default size of the normal modal from 500px to 600px. For more information visit https://getbootstrap.com/docs/5.0/components/modal/#variables

In your styles.scss

@import "bootstrap-customisation";

Marielamariele

Answer 6

As per the Bootstrap documentation, the way to change Bootstrap modal size, is to add a modifier class to the .modal-dialog element. Out of the box, Bootstrap modals can be any of 5 possible supported sizes, which are:

1. Small (.modal-sm)
2. Medium/Default (No Class)
3. Large (.modal-lg)
4. Extra-Large (.modal-xl)
5. Fullscreen (.modal-fullscreen)

Notice that there's not any Extra-Extra-Large .modal-xxl size, despite that Bootstrap supports the XXL size as part of its native grid system. That's weird. It definitely feels like it should be there. Let's say you want to implement it, in a good Bootstrap way (without hard-coding width values in your code). I have a .modal-xxl class which I use in my projects. Here's how I implemented it:

How To Implement An Extra-Extra Large .modal-xxl Modal Size

1. Add a $modal-xxl variable to your application-specific _variables.scss. Its value needs to be the maximum possible width of the XXL grid breakpoint. To do this, use map-get and take the xxl value of the $container-max-widths array map. Now if for some reason your application XXL grid size ever changes, this will update too. NOTE: The default value Bootstrap has set for this is 1320px.

$modal-xxl: map-get($container-max-widths, 'xxl') !default;

2. Now you must add the following code to your application-specific SCSS:

@include media-breakpoint-up(lg) {
    .modal-xxl {
        --#{$variable-prefix}modal-width: #{$modal-lg};
    }
}
@include media-breakpoint-up(xl) {
    .modal-xxl {
        --#{$variable-prefix}modal-width: #{$modal-xl};
    }
}
@include media-breakpoint-up(xxl) {
    .modal-xxl {
        --#{$variable-prefix}modal-width: #{$modal-xxl};
    }
}

That's It!

Now, you can make your modal be XXL size simply by adding the .modal-xxl modifier class to your .modal-dialog, and your modal will now be an Extra-Extra Large size.

Not