Как центрировать карты в бутстрапе 4?

Я использую bootstrap 4 alpha 3.
Я хочу центрировать карту горизонтально посередине на странице.

Preview/link: http://codepen.io/vaibhavsingh97/full/VjRAXW

Я попробовал все различные варианты, перечисленные на странице примера загрузки для карт.

Как я могу это достичь?

Ответы

Ответ 1

Добавить css для.card

.card {
        margin: 0 auto; /* Added */
        float: none; /* Added */
        margin-bottom: 10px; /* Added */
}

вот ручка

UPDATE: вы можете использовать класс .mx-auto доступный в bootstrap 4, к центральным картам.

Ответ 2

Обновление 2018 года

Нет необходимости в дополнительном CSS, и в Bootstrap 4 есть несколько методов центрирования:

  • text-center для центрального display:inline элементы
  • mx-auto для центрирования display:block элементы display:block внутри display:flex (d-flex)
  • offset-* или mx-auto можно использовать для offset-* столбцов сетки
  • или justify-content-center на столбцах row и столбцов

mx-auto (авто по оси x) будет находиться внутри display:flex элементы с определенной шириной (%, vw, px и т.д.). Flexbox используется по умолчанию для столбцов сетки, поэтому существуют также различные методы центрирования.

В вашем случае вы можете просто mx-auto на card.