Bootstrap не идеально центрирует контент

Question

У меня есть этот простой код:

      <div class="container branduri justify-content-center">
    <div class="row justify-content-center">
 <div class="col-xl-4">
  <h1><strong>+100</strong></h1>
 </div>
 <div class="col-xl-4">
  <h1><strong>+100</strong></h1>
 </div>
 <div class="col-xl-4">
   <h1><strong>+100</strong></h1>
 </div>

Проблема в том, что на моем сайте, как вы можете видеть на прилагаемой фотографии, столбцы не идеально отцентрированы. Почему? Большое спасибо.

Answer 1

Добавить bootstrap класс текстовый центр в строке div

class="row justify-content-center text-center"

Answer 2

Вам просто нужно центрировать текст в каждом столбце, добавив это свойство в строку text-align:center; или добавив Bootstrap класс text-center следующим образом:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container branduri justify-content-center">
     <div class="row justify-content-center text-center">
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
               <h1><strong>+100</strong></h1>
          </div>
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
               <h1><strong>+100</strong></h1>
          </div>
          <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
               <h1><strong>+100</strong></h1>
          </div>
     </div>
</div>