Центрировать две колонки в bootsrap 4

Question

У меня есть два столбца, и я хочу центрировать их, в boostrap 3 это было реализовано с использованием push и pull в boostrap 4, и я не могу понять.

вот что у меня есть.

 <div class="col-sm bg-success">1 </div>
      <div class="col-sm bg-warning">2 </div>
    </div>  

Я хочу, чтобы эти два элемента были центрированы следующим образом.

что мне нужно изменить, чтобы получить желаемый результат?

Answer 1

Добавьте их к row, который имеет justify-content-center

<div class="row justify-content-center">
    <div class="col-4 bg-success">1 </div>
    <div class="col-4 bg-warning">2 </div>
</div>

При желании добавьте mr-* к классам первого столбца, где * указывает пространство, которое нужно добавить между ними.

https://codepen.io/tentacular261/pen/XYLKMw

Answer 2

Вы можете использовать offset- класс, чтобы получить то, что вы хотите.

<div class="container">
  <div class="row">
      <div class="col-sm-4 offset-sm-2 bg-success">
          1
      </div>
      <div class="col-sm-4 bg-warning">
          2
      </div>
  </div>  
</div>

Скрипка: http://jsfiddle.net/aq9Laaew/72786/