Center in Card body (Bootstrap) [duplicate]

Question

I have a small problem with a card body, I want to have both column in center, as you can see in the picture, it's kinda on the left compare to the button... I have tried some class in bootstrap but I can't seem to find the right one... Hope you can help me [EDIT AFTER isherwood]

So I have tried putting text-center but I don't know why it's not working the same ways as the snippet...

<div class="card">
          <div class="card-body ">
            <h5 class="card-title text-center">Jours</h5>
            <div>
              <div class="d-flex justify-content-center">
                <div class="col-sm-6 mb-3 text-center">
                  <fa-icon class="h5" [icon]="faFont.faCoffee"></fa-icon> Matin
                  <div *ngFor="let jour of semaine" class="ms-3 form-check">
                    <input class="form-check-input" type="checkbox" [value]="jour">
                    <label class="form-check-label d-inline-flex">{{jour}}</label>
                  </div>
                </div>
                <div class=" col-sm-6 mb-3 text-center">
                  <fa-icon class="h5" [icon]="faFont.faCookieBite"></fa-icon> Après-Midi
                  <div *ngFor="let jour of semaine" class="ms-3 form-check">
                    <input class="form-check-input" type="checkbox" [value]="jour">
                    <label class="form-check-label d-inline-flex">{{jour}}</label>
                  </div>
                </div>
              </div>
            </div>

            <div class="text-center">
              <button type="button" class="btn btn-primary">Valider</button>
            </div>
          </div>

Answer 1

If I understand correctly, just include text-center on each column:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous">

<div class="card">
  <div class="card-body ">
    <h5 class="card-title text-center">Jours</h5>
    <div>
      <div class="d-flex justify-content-center">
        <div class="col-sm-6 mb-3 text-center">
          <fa-icon class="h5" [icon]="faFont.faCoffee"></fa-icon> Matin
          <div *ngFor="let jour of semaine" class="ms-3 form-check">
            <input class="form-check-input" type="checkbox" [value]="jour">
            <label class="form-check-label d-inline-flex">{{jour}}</label>
          </div>
        </div>
        <div class=" col-sm-6 mb-3 text-center">
          <fa-icon class="h5" [icon]="faFont.faCookieBite"></fa-icon> Après-Midi
          <div *ngFor="let jour of semaine" class="ms-3 form-check">
            <input class="form-check-input" type="checkbox" [value]="jour">
            <label class="form-check-label d-inline-flex">{{jour}}</label>
          </div>
        </div>
      </div>
    </div>

    <div class="text-center">
      <button type="button" class="btn btn-primary">Valider</button>
    </div>
  </div>
</div>

https://getbootstrap.com/docs/4.5/utilities/text/#text-alignment