Hi there
I’m using the standard modal from Bootstrap Studio. When activated the modal fades into the viewport, but alway exceeds it by approx. 10 % to the bottom. Is there a CSS way to make the modal appear not higher than the current viewport. I have tried max-height = 90vh in different places, but this resulted only in cutting off parts, never in scaling. Any ideas?
Thanks for your help!
Cheers
Guido
Hello,
I don’t think it’s necessary to use custom CSS.
Bootstrap comes standard with a set of classes for customizing modal behavior.
I’ve attached a screenshot of the classes I use without any problems.
The Bootstrap documentation explains the role of each of these classes.
Hi Claude, thanks for your help.
Still this doesn’t really solve my problem.
Here’s an example:
I’d like it be inside the viewport without the need for using the full-screen-option.
Here’s another issue:
In MD the modal is even smaller than the acutal image.
So I’d like the modal to be 1. always inside the viewport without the need for scroling, and 2. taking up 90% of the viewport.
Any way to do this?
Thanks again for your help.
Here’s some code created with perplexity.ai.
Adapt the prompt to your request.
Prompt:
Using Bootstrap 5, can you create a modal window that occupies 90% of the screen width and height?
Provide me with the HTML code in English so that I can carry out the test.
Use standard Bootstrap classes wherever possible, and custom CSS code if necessary.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap 5 Large Modal</title>
<!-- Bootstrap 5 CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
/* Custom CSS for the modal */
.modal-xl-custom {
max-width: 90%;
width: 90%;
height: 90vh;
margin: 5vh auto;
}
.modal-content-custom {
height: 100%;
}
</style>
</head>
<body>
<!-- Button to trigger the modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#largeModal">
Open Large Modal
</button>
<!-- The Modal -->
<div class="modal fade" id="largeModal" tabindex="-1" aria-labelledby="largeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-xl modal-xl-custom">
<div class="modal-content modal-content-custom">
<div class="modal-header">
<h5 class="modal-title" id="largeModalLabel">Large Modal Title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>This is a large modal that takes up 90% of the screen width and height.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- Bootstrap 5 JS Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>
On the image enable responsive from the options panel or write this css
.modal-body img {
width: 100%;
height: auto;
}
Hi,
thanks for your help and sorry for my late reply.
I tried the perplexity code and already had responsive image enabled.Unfortunately the result looks like this:
Any other suggestions?
Kind regards
Guido
Try adding a mh-100 class to your image
Thanks
I found a solution now:
max heigth = 85 vh on the image plus Align center on the modal body made it work.
Cheers
Guido
