Колонки

Вертикальное выравнивание

Единый класс для строки

Единый класс для строки с фиксированной высотой строки настраивается общее выравнивание

align-items-start	вверху
align-items-center	посередине
align-items-end	снизу

Например, устанавливается высота в 100px и выравнивание посередине для всех колонок

<style>
  .middle-row{
    height: 100px;
    }
</style>
<div class="container">
  <div class="row align-items-center middle-row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4">col-sm-4</div>
  </div>
</div>

Индивидуальное выравнивание каждого столбца

Класс align-self-* который применяется для класса столбца

<style>
  .middle-row{
    height: 100px;
    }
</style>
<div class="container">
  <div class="row align-items-center middle-row">
    <div class="col-sm-8">col-sm-8</div>
    <div class="col-sm-4 align-self-end">col-sm-4</div>
  </div>
</div>

Горизонтальное выравнивание

justify-content-* для выравнивания всех столбцов в классе row

justify-content-start	Колонки смещены в начало, между колонками нет промежутка
justify-content-center	Колонки в центре, между колонками нет промежутка
justify-content-end	Колонки смещены в конец, между колонками нет промежутка
justify-content-around	Последующие три класса с промежутками (считая промежуток как колонку) и выравниванием относительно этого. +/- для использования.
justify-content-between
justify-content-evenly

Порядок отображения

Классы order- , поддерживают контрольные точки. Элементы без порядка имеют приоритет выше.

<div class="row">
    <div class="col">
      Первый в DOM, первый в отображении
    </div>
    <div class="col order-5">
      Второй в DOM, последний в отображении
    </div>
    <div class="col order-1">
      Третий в DOM, третий в отображении
    </div>
    <div class="col">
      Последний в DOM, второй в отображении
    </div>
  </div>