CODEWITHSUNDEEP
htmlcsstwitter-bootstrap-3
Damara Jati P
Damara Jati P

Reputation: 1807

How to increase Bootstrap Modal Width?

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

Upvotes: 174

Views: 597395

Answers (23)

9uifranco
9uifranco

Reputation: 391

Straight forward solution if you're in a hurry and your boss is throwing more tasks at you:

<div class="modal-dialog modal-dialog-centered" style="width 100% !important; max-width: 650px !important;">

Upvotes: 0

hunainm
hunainm

Reputation: 11

You can define modal-xl but it is limited to 1140px maximum width so you can also define in line style max-width to the modal-dialog div like this if you need to define more width than that:

<div class="modal-dialog modal-xl" role="document" style="max-width:1400px;">

Upvotes: 1

M Katz
M Katz

Reputation: 5446

For me what worked with bootstrap 5.2.1 is:

<div class="modal-dialog MyDialogWideningClass">

and

.MyDialogWideningClass
{
    --bs-modal-width: 600px;
}

Upvotes: 2

Thiago Lenzi
Thiago Lenzi

Reputation: 31

First of all. The class to be sister is: modal-dialog

the native Bootstrap options can be:

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

or

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

or

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

Upvotes: 3

heker
heker

Reputation: 45

to easy, if you want const so

```<div class="modal-dialog" style="max-width:1000px; max-height:1000px;">```

Upvotes: -2

CodeToLife
CodeToLife

Reputation: 4171

2021 Sep. supported sizes by Bootstrap 5

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

Upvotes: 7

Vishwa
Vishwa

Reputation: 251

default dialog size is 500px. If you want your dialog look large than default size than you should add class="modal-dialog modal-lg modal-dialog-centered" you can see the difference.

Upvotes: 1

Bharathiraja
Bharathiraja

Reputation: 812

I have also faced the same issue when increasing the width of the modal, the modal is not displaying in the centre. After playing around, I found the below solution.

.modal-dialog {
    max-width: 850px;
    margin: 2rem auto;
}

Upvote if this works for you. Happy Coding!

Upvotes: 14

kamal Aliyu
kamal Aliyu

Reputation: 77

go to the modal-dialog div and add

 style="width:70%"

depending on the size you want

Upvotes: 3

Kollar
Kollar

Reputation: 11

I know this is old, but to anyone looking, you now need to set the max-width property.

.modal-1000 {
    max-width: 1000px;
    margin: 30px auto;
}

Upvotes: 1

Hakan Fıstık
Hakan Fıstık

Reputation: 19511

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

Upvotes: 20

sumod badchhape
sumod badchhape

Reputation: 964

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

Upvotes: 50

Dok
Dok

Reputation: 9

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

use modal-xl

Upvotes: 0

Zax
Zax

Reputation: 3010

The simplest way to do it is:

$(".modal-dialog").css("width", "80%");

where we can specify the width of the modal in terms of percentage of the screen.

Here is a working example to demonstrate the same:

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
  <script type="text/javascript">
  $(document).ready(function () {
  		$(".modal-dialog").css("width", "90%");
  });
  </script>
</head>
<body>

<div class="container">
  <h2>Modal Example</h2>
  <!-- Trigger the modal with a button -->
  <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

</body>
</html>

Upvotes: 2

Mudasir Younas
Mudasir Younas

Reputation: 872

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>

Upvotes: 57

Ehsan Sajjad
Ehsan Sajjad

Reputation: 62498

I had a large grid that needed to be displayed in the modal and just applying the width on body was not working correctly as table was overflowing though it had bootstrap classes on it. I ended up applying same width on modal-body and modal-content :

<!--begin::Modal-->
<div class="modal fade" role="dialog" aria-labelledby="" aria-hidden="true">
    <div class="modal-dialog modal-lg modal-dialog-centered" role="document">
        <div class="modal-content" style="width:980px;">
            <div class="modal-header">
                <h5 class="modal-title" id="">Title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true" class="la la-remove"></span>
                </button>
            </div>
            <form class="m-form m-form--fit m-form--label-align-right">
                <div class="modal-body" style="width:980px;">
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-brand m-btn" data-dismiss="modal">Close</button>

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

<!--end::Modal-->

Upvotes: 6

Muddasir23
Muddasir23

Reputation: 602

Actually, you are applying CSS on modal div.

you have to apply CSS on .modal-dialog

For example, see the following code.

<div class="modal" id="myModal">
 <div class="modal-dialog" style="width:xxxpx;"> <!-- Set width of div which you want -->
      <div class="modal-content">
           Lorem Ipsum some text...content 

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

Bootstrap also provides classes for setting div width.

For small modal use modal-sm

And for large modal modal-lg

Upvotes: 2

Henry
Henry

Reputation: 1270

If you want to keep the modal responsive use % of width instead of pixels. You can do it in-line (see below) or with CSS.

<div class="modal fade" id="phpModal" role="dialog">
            <div class="modal-dialog modal-lg" style="width:80%;">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                        <h4 class="modal-title">HERE YOU TITLE</h4>
                    </div>
                    <div class="modal-body helpModal phpModal">
                        HERE YOUR CONTENT
                    </div>
                </div>
            </div>
        </div>

If you use CSS, you can even do different % for modal-sm and modal-lg.

Upvotes: 5

Wolverine
Wolverine

Reputation: 1702

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!

Upvotes: 6

huageorg
huageorg

Reputation: 203

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

Upvotes: 10

Mahi Tej Gvp
Mahi Tej Gvp

Reputation: 1034

I suppose this happens due to the max-width of a modal being set to 500px and max-width of modal-lg is 800px I suppose setting it to auto will make your modal responsive

Upvotes: 0

SilumanSupra
SilumanSupra

Reputation: 71

.your_modal {
    width: 800px;
    margin-left: -400px; 
 }

margin left's value is half of modal's width. I'm using this with Maruti Admin theme since it doesn't has class .modal-lg .modal-sm

Upvotes: -2

Praveen Kumar Purushothaman
Praveen Kumar Purushothaman

Reputation: 167240

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

Upvotes: 362

Related Questions