Bootstrap выравнивание блоков

Продолжаем работать с фреймворком Bootstrap и в этом уроке я расскажу о выравнивании блоков по горизонтали и вертикали, так же расскажу об основных классах, которые используются при верстке сайтов.

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

Существует 2 варианта как можно выравнивать блоки по вертикали, это выравнивать всю строку то есть прописывать классы в row или же непосредственно задавать выравнивание каждого блока отдельно. Для начала давайте посмотрим, как можно выравнивать всю строку, а делается это при помощи класса align-items-(зачение), а значения возможны 3 как и во всех классах выравнивания это: start, center, end:

<div class="row rowBg align-items-start">
      <div class="col-3">sample1</div>
      <div class="col-3">sample2</div>
      <div class="col-3">sample3</div>
  </div>

Получаем:

Вся строка выравнивается по верху, она так же выравнивается по умолчанию, но бывают ситуации, когда этот параметр необходимо задать явно. Давайте выровняем по центру align-items-center

И зададим выравнивание по нижнему краю align-items-end:

Все просто и удобно, теперь давайте рассмотрим непосредственное выравнивание блоков, то есть зададим класс для col, с помощью класса align-self-(значение)

<div class="row rowBg align-items-center">
  <div class="col-3">sample1</div>
  <div class="col-3 align-self-start">sample2</div>
  <div class="col-3">sample3</div>
</div>

Как видите второй блок выровнялся по верхнему краю, так же можно выровнять его и по нижнему краю align-self-end

Я думаю суть и принцип тут вполне понятен, благодаря данному классу вы можете выравнивать любой блок так как вам необходимо, без особых усилий.

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

Горизонтальное выравнивание осуществляется с помощью класса justify-content-(значение) и прописывается оно в строке то есть row:

<div class="row rowBg align-items-center justify-content-center">
  <div class="col-3">sample1</div>
  <div class="col-3">sample2</div>
  <div class="col-3">sample3</div>
</div>

Как видите все блоки выровнялись по центру как по горизонтали так и по вертикали, теперь выровняем по правому краю justify-content-end

И для полноты картины выровняем по левому краю justify-content-start

С выравниванием все, я думаю здесь ни каких вопросов не должно остаться.

Основные классы

При верстке сайта очень часто мы используем отступы такие как margin и padding и в фреймворке bootstrap так же упрощен процесс их использования и сделаны очень интересные классы, например если нам необходимо задать верхний отступ то используем margin-top: (значение) а в bootstrap это можно записать так mt-(значение), так же и с внутренними отступами предположим отступ от низа padding-bottom: (значение), будет выглядеть pt-(значение). Для наглядности вот код и результат:

Более подробное описание со значениями вы без проблем найдете в документации.

Далее ещё один интересный класс, это выравнивание текста, в чистом css мы используем для этого text-align: (значение); в фреймворке все снова упрощено text-(значение) наглядный пример:

<div class="row rowBg align-items-center justify-content-center">
    <div class="col-3 text-left">sample1</div>
    <div class="col-3 text-center">sample2</div>
    <div class="col-3 text-right">sample3</div>
  </div>

Как видите в первом блоке текст выровнен по левому краю, во втором по центру, в третьем по правому краю.

Так же есть интересный класс .container он создает как бы контейнер по центру экрана с равными боковыми отступами, очень часто используется на практике:

Ну а если вам не нужны отступы по бокам и центрирование, то задаем класс .container-fluid и тогда контейнер будет занимать весь экран.

И последний не маловажный класс это no-gutters вы его прописываете вместо container если нужно создать дизайн «edge-to-edge» (контент плотно прилегает к краям девайса), он обнуляет margin-right и margin-left.

Вот собственно и все что вам для начала необходимо знать, а более глубокие познания в фреймворке вы получите непосредственно в процессе, заглядывая в справочник по необходимым вам моментам.

HTML5 и CSS3

Научись создавать профессиональные современные сайты на HTML5 и CSS3

Узнать подробности