When I change button place while using bootstrap it through it in another place

  bootstrap-4, css, html, javascript, php

body

        <div class="container" style="margin-top: 70px;">
          <div class="formlogin bg-light bg-gradient shadow-lg p-3 mb-5 bg-body rounded col-8">
            <p id="signText"> Signin Form</p>
            <div class="form-floating formPos mb-3">
              <input type="email" class="form-control" id="floatingInput" placeholder="[email protected]">
              <label for="floatingInput">Email address</label>
            </div>
            <div class="form-floating formPos">
              <input type="password" class="form-control" id="floatingPassword" placeholder="Password">
              <label for="floatingPassword">Password</label>
            </div>
            <a href="#">
              <p id="forgetPos"> Forget Password?</p>
            </a>
              <div class="form-check">
                <input class="form-check-input rememberPos" type="checkbox" value="" id="defaultCheck1">
                <label class="form-check-label rememberPos" for="defaultCheck1">
                  Remember Me
                </label>
            </div>
            <button type="button" class="btn btn-success buttonPos">Login</button>
          </div>
        </div>

when I try to let the form fit for mobile users and computer users everything are okay but the problem is when I smaller screen the btn and forget passowrd and remember me go out from my div and make problem in design

Source: Ask PHP

LEAVE A COMMENT