On mobile devices, Bootstrap modal is not centered correctly when body min-width is wider than 980px.
I tried bootstrap 4, bootstrap 5 and bootstrap 3 modals.
You can see in the screenshot that the modal div is positioned out of the screen and the backdrop doesnt cover the full width, leaving white space on the right.
<!DOCTYPE html>
<html dir="rtl">
<head>
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/css/bootstrap.min.css"
integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#3.3.7/dist/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</head>
<body>
<style>
body {
min-width: 1035px;
}
</style>
<button class="btn btn-lg btn-primary center-block text-" data-remote="false" data-toggle="modal"
data-target="#myModal">show modal</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
some content
</div>
</div>
</div>
</div>
</body>
</html>
Add mx-auto class to parent div like that class="modal fade mx-auto"
Related
On mobile devices, the Bootstrap modal is not centered correctly when the page is wider than 980px, leaving white space on the right of the screen.
I don't want to use a meta viewport that will zoom the page in as I need the full width to show on mobile devices.
The snippet below is using Bootstrap 5. I tried 3 and 4 too.
You can see in the screenshot that the modal div is positioned out of the screen and the backdrop doesn't cover the full width, leaving white space on the right and also pushing page content (the button) to the left.
<-- invisible whitespace in image
You can see it here with a phone or using chrome mobile device mode
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/jquery#3.5.1/dist/jquery.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.1/dist/js/bootstrap.bundle.min.js"
integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
crossorigin="anonymous"></script>
</head>
<body class="text-center">
<style>
body {
width: 1035px;
}
#open-button {
font-size: 32px;
}
</style>
<!-- Button trigger modal -->
<button id="open-button" type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
Launch demo modal
</button>
<div>
<img src="https://via.placeholder.com/1024" alt="">
</div>
<!-- Modal -->
<div class="modal fade mx-auto" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
...
</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>
</body>
</html>
I've been trying to build a customize bootstrap theme without success. I want just the Modal component. For that, I'm using Bootstrap 4 and I did the following:
I installed bootstrap library through NPM within my project
(simple web page)
Created 2 css files: mine.css and mine.scss.
Imported the necessary (I think) modules for just Modal component.
I run the code "sass mine.scsss mine.css" into the shell
Then it works, but not the transition effect. It seems like something is missing. Here is my code:
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>Modal</title>
<link rel="stylesheet" href="mine.css">
</head>
<body>
MORE INFORMATION
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">More information</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
Coming soon!
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.6.0.js"
integrity="sha256-H+K7U5CnXl1h5ywQfKtSj8PCmoN9aaq30gDh27Xc0jk=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"
integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa"
crossorigin="anonymous"></script>
</body>
</html>
mine.scss
// Required
#import "node_modules/bootstrap/scss/functions";
#import "node_modules/bootstrap/scss/variables";
#import "node_modules/bootstrap/scss/mixins";
// Modal
#import "node_modules/bootstrap/scss/modal";
#import "node_modules/bootstrap/scss/buttons";
Here is an example.
You need to add https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/scss/_transitions.scss because it hosts the fade class modals are using
The classes used are .fade .fade.in and .show
How can I solve this issue?
<div class="modal fade" id="onload-modal">
<!-- data-backdrop="static" data-keyboard="false" -->
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p><img src="#" id="modal-banner" alt="Image"></p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Skip</button>
<button class="btn btn-danger" onclick="#">Register Now</button>
</div>
</div>
</div>
</div>
It seems like some other code is clashing with this code. Can you please help?
<script>
$(document).ready(function() {
$("#onload-modal").modal('show');
});
</script>
Instead of showing the modal when the document is ready, try to show the modal when the window is loaded, as below:
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css" integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body>
<div class="modal fade" id="onload-modal">
<!-- data-backdrop="static" data-keyboard="false" -->
<div class="modal-dialog modal-dialog-centered modal-sm">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<p><img src="#" id="modal-banner" alt="Image"></p>
</div>
<div class="modal-footer">
<button class="btn btn-danger" data-dismiss="modal">Skip</button>
<button class="btn btn-danger" onclick="#">Register Now</button>
</div>
</div>
</div>
</div>
<!-- jQuery first, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
<script>
$(window).on('load', function()
{
$("#onload-modal").modal('show');
});
</script>
</body>
</html>
I am creating a bootstrap modal which will contain an image. Everything works perfectly, but for some reason, I cannot change the styling of the button whatsoever.
I have tried changing the color of the main button by calling its class in CSS. But it is not cooperating.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal" >Prize Plaza</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<style>
.btn.btn-info.btn-lg {
background-color: red;
}
</style>
Use background instead of background-color. It is because there are some other classes like .btn-info which have properties like background-image with a linear-gradient value which affects the button and you have not overwritten it.
You might also want to override the border-color property so that the blue border is not being used for red button.
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">
<!-- Datatables -->
<link rel="stylesheet" type="text/css" href="https://cdn.datatables.net/1.10.13/css/dataTables.bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://nightly.datatables.net/js/jquery.dataTables.js"></script>
<script src="https://nightly.datatables.net/js/dataTables.bootstrap.js"></script>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Prize Plaza</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title"></h4>
</div>
<div class="modal-body">
<embed src="https://ak.picdn.net/shutterstock/videos/3998236/thumb/3.jpg" frameborder="0" width="100%" height="100%">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<style>
.btn.btn-info.btn-lg {
background: red;
border-color: red;
}
</style>
I'm using bootstrap modal for login and register. I want to open register modal in after closing login modal on same button. Now register modal is opening on click of button on login pop up. After clicking on overlay the both pop going close but overlay is not hiding.
So for hiding first modal I used data-dismiss="modal" for closing first modal but it's not opening another modal. I want to close both modal on clicking on overlay or hide first modal and then show another modal. If it's possible without jQuery then great. Please help
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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="#login">Login</button>
<!-- Modal -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>login</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#register" data-dismiss="modal">register</button>
</div>
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>register</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I can't imagine how the modal show inside modal, but do you think this is what you want?
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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="#login">Login</button>
<!-- Modal -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>login</p>
<button id="register-button" type="button" class="btn btn-info btn-lg" data-dismiss="modal">register</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>register</p>
</div>
</div>
</div>
</div>
</div>
</div>
<script>
$("#register-button").click(function(){
$("#register").modal("show")
})
</script>
</body>
</html>
Yes, this possible without jquery. Your html(modal code) is not organized proper way. You can not use a modal within a modal. You have to be separate each modal.
<!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.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></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="#login">Login</button>
<!-- Modal -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>login</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#register" data-dismiss="modal">register</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>register</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Why do you want to show a modal inside a modal. try this one. when login button clicks it will open login modal then register button->click - open register modal.
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.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"/>
<style type="text/css">
</style>
</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="#login">Login</button>
<!-- Modal -->
<div class="modal fade" id="login" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>login</p>
<button type="button" class="btn btn-info btn-lg" id="btn_register">register</button>
</div>
</div>
</div>
</div>
<div class="modal fade" id="register" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-body">
<p>register</p>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript">
$("#btn_register").click(function(){
$("#login").modal("hide");
$("#register").modal("show");
});
</script>
</body>
</html>