Advertisement
Advertisement


How to increase Bootstrap Modal Width?


Question

i've tried this but gone wrong

here's the css

body .modal-ku {
width: 750px;
}

and here's the failed result

enter image description here

2018/08/14
1
105
8/14/2018 10:59:12 AM

Accepted Answer

In your code, for the modal-dialog div, add another class, modal-lg:

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

Or if you wanna centre your modal dialog, use:

.modal-ku {
  width: 750px;
  margin: auto;
}
253
3/2/2017 9:17:18 PM

The easiest way can be inline style on modal-dialog div :

<div class="modal" id="myModal">
   <div class="modal-dialog" style="width:1250px;">
      <div class="modal-content">
            ...

        </div>
     </div>
 </div>
2019/07/15

In my case,

  1. Giving a static width to the modal hurts the responsiveness.
  2. The modal-lg class was not wide enough.

so the solution was

@media (min-width: 1200px) {
   .modal-xlg {
      width: 90%; 
   }
}

and use the above class instead of modal-lg class

2020/07/08

You can choose between modal-lg and modal-xl classes or if you want custom width then, set max-width property with inline css. For example,

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

or

<div class="modal-dialog" style="max-width: 80%;" role="document">
2020/03/24

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.

@media (min-width: 768px) {
  .modal-dialog {
    width: 600;
    margin: 30px auto;
  }
  .modal-content {
    -webkit-box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
            box-shadow: 0 5px 15px rgba(0, 0, 0, .5);
  }
  .modal-sm {
    width: 300px;
  }
}
2018/04/26

In Bootstrap, the default width of modal-dialog is 600px. But you can explicitly change its width. For instance, if you would like to maximize its width to the value of your choice, 800px for instance, you do as following:

.modal-dialog {
    width: 800px;
    margin: 30px auto;
}

Note: This change sets to all modal dialog you use in your application. Also, my suggestion is it is best to have your own CSS rules defined and not to touch the core of the framework.

If you only want it to be set for specific modal dialog, use your own catchy class name as modal-800 whose width is set to 800px, as following:

HTML

<div class="modal">
   <div class="modal-dialog modal-800">
      <div class="modal-content">

      </div>
   </div>
</div>

CSS

.modal-dialog.modal-800 {
    width: 800px;
    margin: 30px auto;
}

Likewise, you can have class name as based on the width size like modal-700 whose width is 700px.

Hope it's helpful!

2018/05/08