Центрирование карт по горизонтали внутри контейнера с жидкостью

Question

Я делаю целевую страницу и хочу центрировать две карты по горизонтали. Проблема в том, что я хочу, чтобы они были меньше, чтобы каждая карта имела класс «col-md-3», но я не могу их центрировать. Фрагмент со стилем CSS, который я попытался представить ниже:

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

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<div class="container-fluid">
  <div class="row text-center">
    <div class="col-md-3 mb-3">
      <div class="card h-100">
        <i class="card-img-top"></i>
        <div class="card-body">
          <h4 class="card-title">Registracija</h4>
          <p class="card-text">Registriraj se i počni igrati!</p>
        </div>
        <div class="card-footer py-4">
          <a href="#" class="btn btn-secondary">See portfolio &raquo;</a>
        </div>
      </div>
    </div>

    <div class="col-md-3 mb-3">
      <div class="card h-100">
        <i class="card-img-top"></i>
        <div class="card-body">
          <h4 class="card-title">Prijava</h4>
          <p class="card-text">Ako si registriran, prijavi se ovdje!</p>
        </div>
        <div class="card-footer py-4">
          <a href="#" class="btn btn-secondary">See portfolio &raquo;</a>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

Найденное решение: изменен div с классом row для включения justify-content-center.

<div class="row justify-content-center">