CODEWITHSUNDEEP
twitter-bootstrapmodal-dialog
b85411
b85411

Reputation: 10030

Trying to make bootstrap modal wider

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:

Thin modal

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.

Upvotes: 86

Views: 168732

Answers (6)

Milo Persic
Milo Persic

Reputation: 1118

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.

Upvotes: 11

skcin7
skcin7

Reputation: 797

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;
  1. 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.

Upvotes: 1

MikhailRatner
MikhailRatner

Reputation: 592

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

Upvotes: 2

Krzyszof Ra
Krzyszof Ra

Reputation: 291

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

Upvotes: 29

julian
julian

Reputation: 76

You could try:

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

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

Just add .modal-wide to your classes

Upvotes: 4

Christina
Christina

Reputation: 34642

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

Upvotes: 233

Related Questions