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

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

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>

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

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

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

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!

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!

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.

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

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

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>

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

go to the modal-dialog div and add

 style="width:70%"

depending on the size you want

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.

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>

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

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

.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

to easy, if you want const so

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