Как центрировать несколько строк в столбце, используя Bootstrap?

Question

У меня есть col div с 3-мя строками, и я хочу разместить их в центре col-div, как вы можете видеть на картинке, div-строки находятся на левой стороне col-div, и я надеваю не знаю, как поместить их в центр col div.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col text-center">
  <div class="row">
    <div id="tantargyselectdiv" class="col-sm-5">
      <select name="tantargyselect" id="tantargyselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row">
    <div id="tanarselectdiv" class="col-sm-5">
      <select name="tanarselect" id="tanarselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row">
    <form action="{{URL::to('statisztikaBetoltFelev')}}" method="post">
      <input type="hidden" name="_token" value="{!! csrf_token() !!}">
      <div id="felevselectdiv" class="col-sm-5 text-center">
        <select name="felevselect" id="felevselect">
        </select>
      </div>
      <div class="col-sm-5 text-center">
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Mehet</button>
        </div>
      </div>
    </form>
  </div>
</div>

Я знаю, это выглядит ужасно для профессиональных веб-разработчиков, но я не специалист по стилю, пожалуйста, помогите мне, если можете.

Answer 1

Как сказали многие пользователи в разделе комментариев, justify-content-center будет работать, но никто не приходит с ответом, поэтому я делаю это.

См. Фрагмент ниже, который поможет вам понять.

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet"/>

<div class="col text-center">
  <div class="row justify-content-center">
    <div id="tantargyselectdiv" class="col-sm-5">
      <select name="tantargyselect" id="tantargyselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row justify-content-center">
    <div id="tanarselectdiv" class="col-sm-5">
      <select name="tanarselect" id="tanarselect">
      </select>
    </div>
    <div class="col-sm-5 text-center">
      <div class="form-group">
        <button type="submit" class="btn btn-primary">Mehet</button>
      </div>
    </div>
  </div>
  <div class="row justify-content-center">
    <form action="{{URL::to('statisztikaBetoltFelev')}}" method="post">
      <input type="hidden" name="_token" value="{!! csrf_token() !!}">
      <div id="felevselectdiv" class="col-sm-5 text-center">
        <select name="felevselect" id="felevselect">
        </select>
      </div>
      <div class="col-sm-5 text-center">
        <div class="form-group">
          <button type="submit" class="btn btn-primary">Mehet</button>
        </div>
      </div>
    </form>
  </div>
</div>