В Bootstrap 4 есть несколько способов выровнять блоки (div) на странице. Давайте рассмотрим каждый из них подробнее.
1. Использование классов flexbox:
Flexbox - это мощный инструмент для выравнивания элементов внутри контейнера. В Bootstrap 4 вы можете использовать классы flexbox для выравнивания блоков.
- Для выравнивания элементов по горизонтали, вы можете использовать классы justify-content-start, justify-content-end, justify-content-center, justify-content-between, justify-content-around. Например, если вы хотите выровнять блоки по центру горизонтально, вы можете использовать класс justify-content-center:
<div class="d-flex justify-content-center">...</div>
- Для выравнивания элементов по вертикали, вы можете использовать классы align-items-start, align-items-end, align-items-center, align-items-baseline, align-items-stretch. Например, если вы хотите выровнять блоки по центру вертикально, вы можете использовать класс align-items-center:
<div class="d-flex align-items-center">...</div>
2. Использование классов float:
В Bootstrap 4 вы также можете использовать классы float, чтобы выровнять блоки.
- Для выравнивания элементов по горизонтали вы можете использовать классы float-left, float-right и float-none. Например, если вы хотите выровнять блоки по центру горизонтально, вы можете добавить класс mx-auto (margin:auto):
<div class="clearfix mx-auto">...</div>
- Для выравнивания элементов по вертикали с использованием float, вам может понадобиться дополнительный CSS. Например, вы можете использовать класс .my-auto (margin-top: auto, margin-bottom:auto) для выравнивания блоков по центру вертикально:
<div class="clearfix mx-auto my-auto">...</div>
3. Использование классов text:
Для выравнивания текста внутри блоков вы можете использовать классы text в Bootstrap 4.
- Для выравнивания текста по горизонтали вы можете использовать классы text-left, text-right, text-center и text-justify. Например, если вы хотите выровнять текст по центру горизонтально, вы можете использовать класс text-center:
<div class="text-center">...</div>
- Для выравнивания текста по вертикали вы можете использовать классы align-text-top, align-text-bottom и align-text-middle. Например, если вы хотите выровнять текст по центру вертикально, вы можете использовать класс align-text-middle:
<div class="align-text-middle">...</div>
В зависимости от ваших потребностей, вы можете использовать любой из этих методов или их комбинацию для выравнивания блоков в Bootstrap 4.