Пример от тема 6 Лекции Банков

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
  <title>Hello, world!</title>
</head>
<body>
<div class="container"> <!-- Начало на контейнер-->
  <div class="row"> <!-- Начало първи ред-->
    <div class="col text-center">
      <h1>Вход в системата</h1>
    </div>
  </div>
  <div class="row mb-5"> <!-- Начало втори ред. mb/martin bottom/-> разстояние от долният ред=5-->
    <div class="col-lg-6 col-12"> <!-- lg  се слага за промяна на позицията от голям към малък екран да е от едно до друго къв одно под друго -->
      <label for="" class="form-label">Имейл</label>
      <input type="email" class="form-control" placeholder="Text">
    </div>
    <div class="col-lg-6 col-12"> <!-- col-12 означава, че от 0 пиксела до 992 px изрично колоната ще бъде на цял ред;След 992 px ще стане на половина-->
      <label for="" class="form-label">Парола</label>
      <input type="password" class="form-control" placeholder="Text">
    </div>
  </div>
  <div class="row mt-5"> <!-- Начало трети ред. mt/martin top/-> разстояние от горният ред=5 -->
    <div class="col-lg-4 text-center order-1 order-lg-1"> <!-- Колоната е 4 px широка// order-1 -номер на подредба при малък екран // order-lg-1 -номер на подредба при по-голям екран -->
      <div class="form-check">
        <input type="checkbox" class="form-check-input float-none">
        <label for="" class="form-check-label">Не ме отписвай автоматично</label>
      </div>
    </div>
    <div class="col-lg-4 text-center order-3 order-lg-2">
      <a href="" class="link-primary text-decoration-none">Нямате профил? Регистрирайте се</a>
    </div>
    <div class="col-lg-4 text-center order-4 order-lg-3"> <!-- Нова колона и центрирането и-->
      <a  href="" class="link-primary text-decoration-none">Забравена парола</a>
    </div>
    <div class="col-lg text-center col-12 d-grid d-lg-inline-block mt-5 order-2 order-lg-4"> <!-- Нова колона-въвеждане на бутон. col-12 & d-grid заемат цялото поле на ширина -->
      <input type="submit" class="btn btn-primary"> <!-- btn-primary е за син бутон -->
    </div>
  </div>
</div>

<!-- <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>