Bootstrap breakpoint issue on mobile view

i was making a responsive login using bootstrap5. Works fine on the web view, but when i try the mobile view it looks wierd, the md and sm breakpoints dont trigger. Then, start writing this question i paste the code below, my surprise that it work as it must in the mobile view... so cant undestand the why.

Here is a video showing the thing... the code is exactly the same, literally copy-paste as it is. Any idea whats happening?

I'm using XAMPP as 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/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/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>

Bootstrap breakpoint issue on mobile view

1 Answers