Как отцентрировать контент внутри блока bootstrap?

Пользователь

от hoyt.jerde , в категории: HTML/CSS , месяц назад

Как отцентрировать контент внутри блока bootstrap?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от margaret , месяц назад

@hoyt.jerde 

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


Пример:

1
2
3
4
5
6
7
8
<div class="container">
  <div class="row d-flex justify-content-center">
    <div class="col-6">
      <h1>Заголовок</h1>
      <p>Текст контента</p>
    </div>
  </div>
</div>


В данном примере container является основным контейнером Bootstrap, row - рядом, а col-6 - блоком ширины половины ряда. Классы d-flex, justify-content-center и align-items-center позволяют отцентрировать содержимое блока по горизонтали и вертикали.