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

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

CodePudding user response：

You need to also use Bootstrap classes for responsive coding; for example, in your code, you are saying that the column needs to take 8 out of 12 columns in the page (horizontally). This creates issues in small devices; in mobile, you need all possible width of the device, and it means you have to use 12 columns of 12 possible columns. To do that, simply replace the "col-8" class in the ".formlogin" div with "col col-md-8". Your div will be like this:

  <div class="formlogin bg-light bg-gradient shadow-lg p-3 mb-5 bg-body rounded col-md-8 col"

CodePudding user response：

In addition to the above answer by Zara, You could use...

<div class="col-lg-8 col-md-12 mx-auto">

This will hopefully compliment Zara's answer by making your box 12 columns wide on mobile whilst still allowing 8 columns on larger screens, in addition, thanks to mx-auto that box of 8 columns will center in the horizontally.