2
Hello, while trying to increase the width of a modal in bootstrap 4, I tried to change the width of the modal-lg through css as I saw in the English stack overflow. However, I’ve tried the same code and I can’t get modal-lg to go from the 800px preset to a custom measure. The code used is as follows::
.modal-lg{
max-width:80% !important;
}
1
To work you have to put the custom CSS style inside the breacking point! If you are interested here you have a reference in the official documentation, however the default size of modal-lg is 800px and not 80% wide on large screens... https://getbootstrap.com/docs/4.0/components/modal/#optional-Sizes
Look at the example in this example, notice that I had to put the rule of width of the modal within the media query correct @media (min-width: 992px) { .modal-lg {css} }
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
<style>
@media (min-width: 992px) {
.modal-lg {
max-width: 80%;
}
}
</style>
</head>
<body>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.bundle.min.js"></script>
</body>
</html>0
You can add a class modal-long where the class modal-dialog is.
.modal-long {
width: 1080px !important;
}<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Abrir modal
</button>
<!-- The Modal -->
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content modal-long">
<!-- Modal Header -->
<div class="modal-header">
<h4 class="modal-title">Modal Heading</h4>
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
Modal body..
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>I don’t know if it’s just here, but his modal isn’t centered and he kept cutting a piece that was out of the screen....
@hugocsl because I put 1080px to illustrate the increase in modal width.
Browser other questions tagged html5 twitter-bootstrap modal bootstrap-4
You are not signed in. Login or sign up in order to post.
It helped a lot. I just changed the css to
.modal-lg{ min-width:80%;}and ran straight thanks.– MachineTheGod
@Joãomartins good, good that solved then.
– hugocsl