While working on a responsive login layout using Bootstrap 5, I encountered a strange issue. The design looked fine in the web view, but when switching to mobile view, the md and sm breakpoints didn't trigger as expected. However, after pasting the code below and retesting it, everything worked perfectly in the mobile view. I'm puzzled as to why this inconsistency is happening.
If you're interested, here is a video demonstrating the issue. The code used in the video is an exact copy-paste of what I have. Any insights into what might be causing this?
Just FYI, I'm running XAMPP as my server.
<!DOCTYPE html>
<html lang="es">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>Login</title>
<!-- JQuery -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!-- Bootstrap -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e2808d8d969196908392a2d7ccd3ccd1">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8ae8e5e5fef9fef8ebfacabfa4bba4b9">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>
<style>
body {
background-image: url("https://media.istockphoto.com/vectors/geometric-colorful-gradient-background-template-vector-id1172689378?k=20&m=1172689378&s=612x612&w=0&h=e2p0ZMiGiKJE2rtkNUyDoqk_TSSTD1gFHpOi8BzKdnc=");
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #464646;
}
</style>
</head>
<body>
<div class="container vh-100">
<form id="signup" class='row h-100'>
<div class="col d-none d-md-block"></div>
<div class="col m-3 my-auto mx-sm-0 bg-light">
<div class="row mb-3">
<span class="col">
<img src="https://www.pngkit.com/png/detail/140-1403354_bsbr1t9a0resdcqo-logo-demo.png" class="img-fluid" alt="...">
</span>
</div>
<div class="row input-group mb-3 mx-0">
<span class="col-auto input-group-text">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-person-circle" viewBox="0 0 16 16">
<path d="M11 6a3 3 0 1 1-6 0 3 3 0 0 1 6 0z"/>
<path fill-rule="evenodd" d="M0 8a8 8 0 1 1 16 0A8 8 0 0 1 0 8zm8-7a7 7 0 0 0-5.468 11.37C3.242 11.226 4.805 10 8 10s4.757 1.225 5.468 2.37A7 7 0 0 0 8 1z"/>
</svg>
</span>
<input type="text" class="col form-control" name="user" placeholder="User" required>
</div>
<div class="row input-group mb-3 mx-0">
<span class="col-auto input-group-text" id="basic-addon1">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="currentColor" class="bi bi-key-fill" viewBox="0 0 16 16">
<path d="M8 1a2 2 0 0 1 2 2v4H6V3a2 2 0 0 1 2-2zm3 6V3a3 3 0 0 0-6 0v4a2 2 0 0 0-2 2v5a2 2 0 0 0 2 2h6a2 2 0 0 0 2-2V9a2 2 0 0 0-2-2z"/>
</svg>
</span>
<input type="password" class="col form-control" name="pass" placeholder="Password" required>
</div>
<div class="row justify-content-center mb-2">
<div class="col">
<button type="submit" class="btn w-100 btn-success">Log In</button>
</div>
</div>
</div>
</form>
</div>
<script type="text/javascript">
$(function() {
$('#signup').submit(function(e) {
e.preventDefault();
//some code bla bla bla
});
});
</script>
</body>
</html>