1

Есть вот такой row с текстом. введите сюда описание изображения

Сам текст занимает всего 4 колонки по сетке Bootstrap, если я прописываю блоку с данным текстом class='col-4', то элемент занимает первые 4 колонки слева, а мне нужно выровнять по середине, как это можно сделать? Использую только сетку Bootstrap4. Пробовал задавать класс class='col-12' после чего задавать блоку с текстом text-align: center;, но считаю, что это не правильно. Т.к. если бы это был, например, блок с границами, то он растянулся бы на все 12 колонок.

* {
  margin: 0;
  padding: 0;
  font-family: 'Montserrat', sans-serif;
}

html {
  font-size: 10px;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
}

h3 {
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 3px;
  text-transform: uppercase;
}
<section class="your_invetnory">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-4 inventory_before_after">
        <h3>Ваш инвентарь до и после</h3>
      </div>
    </div>
  </div>
</section>

11
  • Вот здесь написано
    – fanfer
    Commented 25 февр. 2018 в 18:54
  • @fanfer, пробовал до этого, не получается, остается на том же месте по какой-то причине.
    – uzi_no_uzi
    Commented 25 февр. 2018 в 18:55
  • Додайте .justify-content-center
    – entithat
    Commented 25 февр. 2018 в 18:59
  • jsfiddle.net/wodh7m5n/1
    – fanfer
    Commented 25 февр. 2018 в 18:59
  • @fanfer, делаю все точно так же, не могу понять, почему у меня не работает.
    – uzi_no_uzi
    Commented 25 февр. 2018 в 19:01

1 ответ 1

2

* {
  font-family: 'Montserrat', sans-serif;
}

html {
  font-size: 10px;
}

.container {
  max-width: 1170px;
  margin: 0 auto;
}

h3 {
  font-size: 15px;
  letter-spacing: 3px;
  text-transform: uppercase;
}
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<section class="your_invetnory">
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-4 inventory_before_after">
        <h3>Ваш инвентарь до и после</h3>
      </div>
    </div>
  </div>
</section>

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.