I try to make the form be on the horizontal and vertical center. When you try to shove a form in <div class="row"></div> layout moves. I can not understand what is wrong. It seems to do everything according to the documentation of Bootstrap. Codeply example

Closed due to the fact that off-topic participants andreymal , 0xdb , Dmitry Kozlov , mkkik , LFC 19 Mar at 7:50 .

It seems that this question does not correspond to the subject of the site. Those who voted to close it indicated the following reason:

  • “Questions asking for help with debugging (“ why does this code not work? ”) Should include the desired behavior, a specific problem or error, and a minimum code for playing it right in the question . Questions without an explicit description of the problem are useless for other visitors. See How to create minimal, self-sufficient and reproducible example . " - andreymal, 0xdb, Dmitry Kozlov, mkkik, LFC
If the question can be reformulated according to the rules set out in the certificate , edit it .

  • and what does "move out" mean? it should be? - humster_spb
  • moves in the sense that the fields and labels are compressed from the sides - DamirFelix
  • @DamirFelix and how do you want? To the fields were the full width of the screen? - Vitaliy Shebanits

1 answer 1

UPD

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-6"> <div class="card"> <div class="card-header">Авторизация</div> <div class="card-body"> <form> <div class="form-group row"> <label for="inputLogin" class="col-form-label col-3 text-right">Логин</label> <div class="col-9"> <input type="text" class="form-control" id="inputLogin" placeholder="Введите логин" required autofocus> </div> </div> <div class="form-group row"> <label for="inputPassword" class="col-form-label col-3 text-right">Пароль</label> <div class="col-9"> <input type="password" class="form-control" id="inputPassword" placeholder="Введите пароль"> </div> </div> <div class="form-group row"> <div class="col-lg-1"></div> <div class="col-lg-2"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="inputCheck"> <label class="form-check-label" for="inputCheck">Запомнить меня</label> </div> </div> </div> <div class="form-group row"> <div class="col-lg-3 offset-lg-1"> <button type="submit" class="btn btn-outline-primary">Войти</button> </div> </div> </form> </div> </div> </div> </div> </div>

It's not a row matter - it's just that for some reason you packed labels and fields into narrow columns for large screens (col-lg-1, col-lg-3). On small screens, everything is OK, but on large ones, it compresses them.

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> <div class="container"> <div class="row justify-content-center"> <div class="col-lg-6"> <div class="card"> <div class="card-header">Авторизация</div> <div class="card-body"> <form> <div class="form-group row"> <label for="inputLogin" class="col-form-label col-lg-1 text-lg-right">Логин</label> <div class="col-lg-3"> <input type="text" class="form-control" id="inputLogin" placeholder="Введите логин" required autofocus> </div> </div> <div class="form-group row"> <label for="inputPassword" class="col-form-label col-lg-1 text-lg-right">Пароль</label> <div class="col-lg-3"> <input type="password" class="form-control" id="inputPassword" placeholder="Введите пароль"> </div> </div> <div class="form-group row"> <div class="col-lg-1"></div> <div class="col-lg-2"> <div class="form-check"> <input type="checkbox" class="form-check-input" id="inputCheck"> <label class="form-check-label" for="inputCheck">Запомнить меня</label> </div> </div> </div> <div class="form-group row"> <div class="col-lg-3 offset-lg-1"> <button type="submit" class="btn btn-outline-primary">Войти</button> </div> </div> </form> </div> </div> </div> </div> </div>

  • I need the label and the input in the same block to be on the same line - DamirFelix
  • @DamirFelix, so what's the problem? asking them columns so that in the amount of not more than 12 it turned out: I updated the answer - I made 3 and 9 for example - humster_spb