Классы для позиционирования html-элементов в Bootstrap 5 и 4

Позиционированные элементы - неотъемлемая часть практически любой html-страницы. Bootstrap, как многоцелевой фреймворк для верстки, конечно же, не мог обойти вопрос позиционирования html-элементов стороной. Разработчиками 4-й и 5-й версии были созданы несколько классов, управляющих типом позиционирования, координатами элементов и их центрированием.

Поскольку Bootstrap-5 уже представил готовую версию фреймворка на своем официальном сайте, мы начнем рассматривать классы позиционирования html-элементов именно с нее. Тем не менее, много сайтов использует еще версию 4, поэтому мы также рассмотрим аналогичные классы для Bootstrap-4.

Для позиционирования элементов в Bootstrap 5 предусмотрено несколько классов, "унаследованных" еще с 4-й версии:

По самим названиям уже можно понять, что вы можете задать статическое (static) - это обычно значение по умолчанию, относительное (relative), абсолютное (absolute), фиксированное (fixed) и "прилипающее" (sticky) позиционирование.

Следует также понимать, что для каждого класса указано позиционирование с декларацией !important, а это значит, что переопределять значение этого свойства в медиа-запросах придется так же.

Кроме того, не существует отзывчивых (адаптивных) классов для позиционирования типа .position-{breakpoint}-absolute.

Еще один важный момент - в отличие от Bootstrap 4, в 5-й версии убрано свойство position: relative для классов сетки .col-, .col-{breakpoint}-. Поэтому вам нужно либо добавить к ним класс .position-relative, либо дописывать это свойство для нужных вам элементов.

Вы можете увидеть разницу в стилях классов на скриншоте.

Классы для указания координат позиционированных объектов

Для каждого элемента, снабженного одним из вышеприведенных классов можно задать классы, связанные со свойствами горизонтального и вертикального позиционирования элементов относительно контейнера. Эти классы имеют названия вида {property}-{position}. В качестве {property} можно использовать:

top - аналог координаты top для свойства position;
start - аналог свойства left для позиционированных элементов;
bottom - аналог свойства bottom для позиционированных элементов;
end - аналог свойства right для позиционированных элементов.

Обратите внимание, что за координату left отвечает класс .start-, за координату right - класс .end-. С координатами top и bottom названия классов в Bootstrap 5 совпадают.

В качестве {position} можно указать:

0 - для начального положения относительно любой из координат ( т.е. .top-0 = top:0, .end-0 = right: 0 и т.п.) ;
50 - для размещения в 50% от любого края (.start-50 = left: 50%, .bottom-50 = bottom - 50%);
100 - для размещения в 100% от любого края (.end-100 = right: 100%, .bottom-100 = bottom - 100%).

Вы можете самостоятельно задать дополнительные классы для координат, используя Sass-переменную $position-values для этого.

Вот некоторые варианты применения классов .top-0, .top-50, .top-100, .bottom-0, start-0, .start-50, .end-0, .end-50 для указания координат абсолютно-позиционированных элементов. Напомню, что при абсолютном и фиксированном позиционировании размер элемента равен его содержимому + отступы.

Посмотрим на размещение абсолютно позиционированных элементов внутри относительно позиционированного родителя с несколькими вариантами координат.

See the Pen Bootstrap 5 position + coordinates by Elen (@ambassador) on CodePen.

Центрирование элементов

Одним из способов центрировать элементы является использование position: absolute + трансформацию смещения, заданную свойством translateX(-50%) (смещение по горизонтали) или translateY(-50%) (смещение по вертикали). Именно этот подход использован в Bootstrap-5 для класса .translate-middle.

Для указания того, что элемент центрируется только по горизонтали, используется класс .translate-middle-x , а класс .translate-middle-y нужен для вертикального центрирования позиционированных элементов.

Пример использования класса .translate-middle, .translate-middle-x ,.translate-middle-yс классами размещения элементов вы найдете ниже.

See the Pen Bootstrap 5 position + transform: translate(50%) by Elen (@ambassador) on CodePen.

Обратите внимание на код:

Примеры использования классов .position-relative + .position-absolute в Bootstrap 5

В примере ниже вы найдете примеры использования классов .position-relative + .position-absolute для кнопок, progress-bar и изображений с подписями.

See the Pen Bootstrap 5 position examples by Elen (@ambassador) on CodePen.

Ссылка на документацию на официальном сайте Bootstrap (англ.)

Ссылка на русскую документацию Bootstrap 5

Позиционирование элементов в Bootstrap-4

В Bootstrap 4-й версии можно использовать такие же классы для позиционирования, что и в 5-й.

Однако классов для указания координат в Bootstrap-4 не существует, как и классов для центрирования позиционированных элементов. Зато есть классы для фиксирования элементов вверху или внизу.

Также есть классы для "прилипающих" к верхнему краю (липких) элементов. Поскольку IE11 и IE10 отображают элементы с position: sticky, как элементы с position: relative, то стили для этого класса записаны в Bootstrap-4 CSS внутри запроса @supports :