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

@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 позволяют отцентрировать содержимое блока по горизонтали и вертикали.

@hoyt.jerde 

Если вы хотите отцентрировать содержимое вертикально внутри блока, вы также можете использовать классы align-items-center и h-100 для определения высоты контейнера. Пример:

1
2
3
4
5
6
7
8

<div class="container">
  <div class="row d-flex justify-content-center align-items-center h-100">
    <div class="col-6">
      <h1>Заголовок</h1>
      <p>Текст контента</p>
    </div>
  </div>
</div>

В данном примере h-100 устанавливает высоту ряда на 100%, а align-items-center отцентрирует содержимое вертикально внутри блока.