I have a col div with 3 row divs that I am trying to center within the col div. Currently, they are aligned to the left side of the col div as shown in the image. I am struggling to figure out how to place them in the center of the col div.
https://i.sstatic.net/H5ld6.png
<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>As an amateur in web development, I understand that this may not meet professional standards. If you have any suggestions on improving the styling, I would greatly appreciate your help.