Trying to make bootstrap modal wider
Twitter BootstrapModal DialogTwitter Bootstrap Problem Overview
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">×</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:
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.
Twitter Bootstrap Solutions
Solution 1 - Twitter Bootstrap
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
Solution 2 - Twitter Bootstrap
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
Solution 3 - Twitter Bootstrap
You could try:
.modal.modal-wide .modal-dialog {
width: 90%;
}
.modal-wide .modal-body {
overflow-y: auto;
}
Just add .modal-wide to your classes
Solution 4 - Twitter Bootstrap
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.
Solution 5 - Twitter Bootstrap
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";