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="name@example.com">
<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
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"
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.