# Колонки

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

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

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

<table border="1" id="bkmrk-align-items-start-%D0%B2%D0%B2" style="border-collapse: collapse; width: 73.9286%;"><colgroup><col style="width: 21.9337%;"></col><col style="width: 78.0692%;"></col></colgroup><tbody><tr><td>align-items-start</td><td>вверху</td></tr><tr><td>align-items-center</td><td>посередине</td></tr><tr><td>align-items-end</td><td>снизу</td></tr></tbody></table>

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

```html
<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-\* который применяется для класса столбца

```html
<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

<table border="1" id="bkmrk-justify-content-star" style="border-collapse: collapse; width: 100%;"><colgroup><col style="width: 26.2501%;"></col><col style="width: 73.8691%;"></col></colgroup><tbody><tr><td>justify-content-start</td><td>Колонки смещены в начало, между колонками нет промежутка</td></tr><tr><td>justify-content-center</td><td>Колонки в центре, между колонками нет промежутка</td></tr><tr><td>justify-content-end</td><td>Колонки смещены в конец, между колонками нет промежутка</td></tr><tr><td>justify-content-around</td><td>Последующие три класса с промежутками (считая промежуток как колонку) и выравниванием относительно этого. +/- для использования.</td></tr><tr><td>justify-content-between</td><td>  
</td></tr><tr><td>justify-content-evenly</td><td>  
</td></tr></tbody></table>

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

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

```html
<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>
```

Однако классы order-first и order-last имеют наивысший приоритет.

**Смещение колонок**

Классы offset-контр\_точка-\* смещают колонку влево на указанную ширину.

```html
<div class="row">
    <div class="col-md-4">.col-md-4</div>
    <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div>
</div>
```

Класс offset-контр\_точка-0 сбрасывает смещение в контрольной точке.

**Автономное использование колонок**

Классы `.col-*` также могут использоваться вне `.row`, чтобы дать элементу определенную ширину. Когда классы колонок используются как непрямые дочерние элементы строки, отступы опускаются. Могут использоваться контрольные точки.

```html
<div class="col-3 p-3 mb-2">
  .col-3: ширина 25%
</div>

<div class="col-sm-9 p-3">
  .col-sm-9: ширина 75% выше контрольной точки sm
</div>
```

Плавающее изображение

```html
<div class="clearfix">
  <img src="..." class="col-md-6 float-md-end mb-3 ms-md-3" alt="...">
  <p>
    Абзац текста-заполнителя. Мы используем его здесь, чтобы показать использование класса clearfix. Мы добавляем здесь довольно много бессмысленных фраз, чтобы продемонстрировать, как столбцы здесь взаимодействуют с плавающим изображением.
  </p>
  <p>
    Как видите, абзацы изящно обтекают плавающее изображение. А теперь представьте, как это будет выглядеть с фактическим содержанием здесь, а не просто с этим скучным текстом-заполнителем, который продолжается и продолжается, но на самом деле не передает никакой осязаемой информации. Он просто занимает место, и его не стоит читать.
  </p>
  <p>
    И тем не менее, здесь вы, по-прежнему настойчив в чтении этот текст-заполнитель, в надежде еще несколько прозрений, или некоторые скрытые пасхальные яйца содержания. Возможно, шутка. К сожалению, здесь ничего этого нет.
  </p>
</div>
```