В Bootstrap 4, элементы внутри колонок (col) можно выравнивать горизонтально и вертикально, используя различные классы для выравнивания.
Для горизонтального выравнивания элементов внутри колонок, можно использовать классы text-left, text-center и text-right. Класс text-left выравнивает элементы по левому краю колонки, text-center - по центру, а text-right - по правому краю.
Например, чтобы выровнять текст по левому краю, вы можете использовать следующий код:
<div class="container">
<div class="row">
<div class="col text-left">
<p>Текст, выровненный по левому краю</p>
</div>
</div>
</div>
Для вертикального выравнивания элементов внутри колонок, можно использовать классы align-items-start, align-items-center и align-items-end. Класс align-items-start выравнивает элементы по верхнему краю колонки, align-items-center - по центру, а align-items-end - по нижнему краю.
Например, чтобы выровнять элементы по центру вертикально, вы можете использовать следующий код:
<div class="container">
<div class="row align-items-center">
<div class="col">
<p>Элемент, выровненный по центру вертикально</p>
</div>
</div>
</div>
Кроме того, Bootstrap 4 также предлагает классы для определения выравнивания элементов в определенном диапазоне ширины экрана. Например, для выравнивания элементов по центру только на маленьких экранах, вы можете использовать классы text-sm-center и align-items-sm-center для горизонтального и вертикального выравнивания соответственно.
Вот пример кода:
<div class="container">
<div class="row align-items-sm-center">
<div class="col text-sm-center">
<p>Текст или элемент, выровненный по центру вертикально и горизонтально только на маленьких экранах</p>
</div>
</div>
</div>
Это некоторые из возможностей Bootstrap 4 для выравнивания элементов внутри колонок. С помощью указанных классов можно легко достичь необходимого эффекта и создать красивый и симметричный внешний вид для вашего веб-сайта или приложения.