https://getbootstrap.com/docs/5.3/layout/columns/
Столбцы
Узнайте, как изменять столбцы с помощью нескольких вариантов выравнивания, упорядочивания и смещения благодаря нашей системе flexbox. Кроме того, узнайте, как использовать классы столбцов для управления шириной элементов, не относящихся к сетке.
На этой странице
Внимание! Прежде чем углубляться в тему изменения и настройки столбцов сетки, обязательно прочитайте страницу «Сетка».
Как они работают
- Столбцы основаны на архитектуре flexbox в сетке. Flexbox означает, что у нас есть возможность изменять отдельные столбцы и модифицировать группы столбцов на уровне строк. Вы выбираете, как столбцы будут увеличиваться, уменьшаться или изменяться иным образом.
- При создании макетов с сеткой весь контент располагается в столбцах. Иерархия сетки Bootstrap начинается с контейнера, затем следует строка, столбец и ваш контент. В редких случаях вы можете комбинировать контент и столбцы, но имейте в виду, что это может привести к непредвиденным последствиям.
- Bootstrap включает в себя предопределённые классы для создания быстрых адаптивных макетов. Благодаря шести точкам останова и дюжине столбцов на каждом уровне сетки у нас есть десятки классов, которые помогут вам создать нужные макеты. При желании это можно отключить с помощью Sass.
Выравнивание
Используйте функции выравнивания flexbox для вертикального и горизонтального выравнивания столбцов.
Вертикальное выравнивание
Измените вертикальное выравнивание с помощью любого из адаптивных классов align-items-*.
As you can see the paragraphs gracefully wrap around the floated image. Now imagine how this would look with some actual content in here, rather than just this boring placeholder text that goes on and on, but actually conveys no tangible information at. It simply takes up space and should not really be read.
And yet, here you are, still persevering in reading this placeholder text, hoping for some more insights, or some hidden easter egg of content. A joke, perhaps. Unfortunately, there’s none of that here.