i've tried this but gone wrong
here's the css
body .modal-ku {
width: 750px;
}
and here's the failed result
This question is related to
html
css
twitter-bootstrap-3
The answer is
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;
}
}
.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
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>_x000D_
<html lang="en">_x000D_
<head>_x000D_
<title>Bootstrap Example</title>_x000D_
<meta charset="utf-8">_x000D_
<meta name="viewport" content="width=device-width, initial-scale=1">_x000D_
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">_x000D_
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>_x000D_
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>_x000D_
<script type="text/javascript">_x000D_
$(document).ready(function () {_x000D_
$(".modal-dialog").css("width", "90%");_x000D_
});_x000D_
</script>_x000D_
</head>_x000D_
<body>_x000D_
_x000D_
<div class="container">_x000D_
<h2>Modal Example</h2>_x000D_
<!-- Trigger the modal with a button -->_x000D_
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>_x000D_
_x000D_
<!-- Modal -->_x000D_
<div class="modal fade" id="myModal" role="dialog">_x000D_
<div class="modal-dialog">_x000D_
_x000D_
<!-- Modal content-->_x000D_
<div class="modal-content">_x000D_
<div class="modal-header">_x000D_
<button type="button" class="close" data-dismiss="modal">×</button>_x000D_
<h4 class="modal-title">Modal Header</h4>_x000D_
</div>_x000D_
<div class="modal-body">_x000D_
<p>Some text in the modal.</p>_x000D_
</div>_x000D_
<div class="modal-footer">_x000D_
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
</div>_x000D_
_x000D_
</div>_x000D_
_x000D_
</body>_x000D_
</html>n your code, for the modal-dialog div, add another class, modal-lg:
use modal-xl
In my case,
- Giving a static width to the modal hurts the responsiveness.
- The
modal-lgclass 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
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">×</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.
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 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!
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>
go to the modal-dialog div and add
style="width:70%"
depending on the size you want
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-->
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;
}
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
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
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.
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!
Source: Stackoverflow.com