Everything is perfect but a little bit of css is required, bootstrap is not going to help you in centering your content of div

In the row class i have added this css property

display: table; margin: 0 auto;

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    
  <div class="container">
    <div class="row" style="display: table; margin: 0 auto;">
      <div class="col">
        <div class="card" style="width: 18rem;">
          <div class="card-header">
            <h4 class="mb-0">Register</h4>
          </div>
          <div class="card-body">

            <form [formGroup]="heroForm" #formDir="ngForm" (ngSubmit)="onSubmit(heroForm.value)">

              <div [hidden]="formDir.submitted && heroForm.valid">

                <div class="cross-validation"
                  [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
                  <div class="form-group">
                    <label for="name">User Name</label>
                    <input id="username" type="text" class="form-control" formControlName="username" required>
                    <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
                      <div *ngIf="username.errors.required">
                        Name is required.
                      </div>
                      <div *ngIf="username.errors.minlength">
                        Name must be at least 4 characters long.
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="name">Email</label>
                    <input id="email" type="email" class="form-control" formControlName="email" required>
                    <div *ngIf="email.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                      <div *ngIf="email.errors.required">
                        Email is required.
                      </div>
                      <div *ngIf="email.errors.email">
                        You must enter a valid email address
                      </div>
                    </div>
                  </div>

                  <div class="form-group">
                    <label for="password">Password</label>
                    <input id="password" type="password" class="form-control" formControlName="password" required>
                    <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                      <div *ngIf="password.errors.required">
                        Password is required.
                      </div>
                      <div *ngIf="password.errors.minlength">
                        Password must be at least 4 characters long.
                      </div>
                    </div>
                  </div>
                </div>

                <button class="button" type="submit">Register</button>
              </div>
            </form>

            <div class="submitted-message" *ngIf="formDir.submitted && heroForm.valid">
              <p>You've registered your with user {{ heroForm.value.username }}!</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

i have a simple registration box, which i want to be centered horizontally on the screen.
I use twitter bootstrap 4.5. The problem is, the box is always rendered near the left of the screen, ignoring every attempt to center it horizontally. I tried it with the examples from the manual by adding the class justify-content-center, i tried mx-auto on the col div, i tried it even manually with margin-left and margin-right set to auto – nothing worked. I had a different website where i used exactly the same strategy and it worked there – the only difference is that i used bootstrap 4.0 there. Can you please help me? Even when removing all the inner html and only print a simple “Hello”, it is not working.

I appreciate any question and many thanks in forward!

<div class="container">
  <div class="row justify-content-center">
    <div class="col mx-auto">
      <div class="card" style="width: 18rem;">
        <div class="card-header">
          <h4 class="mb-0">Register</h4>
        </div>
        <div class="card-body">

          <form [formGroup]="heroForm" #formDir="ngForm" (ngSubmit)="onSubmit(heroForm.value)">

            <div [hidden]="formDir.submitted && heroForm.valid">

              <div class="cross-validation"
                [class.cross-validation-error]="heroForm.errors?.identityRevealed && (heroForm.touched || heroForm.dirty)">
                <div class="form-group">
                  <label for="name">User Name</label>
                  <input id="username" type="text" class="form-control" formControlName="username" required>
                  <div *ngIf="username.invalid && (username.dirty || username.touched)" class="alert alert-danger">
                    <div *ngIf="username.errors.required">
                      Name is required.
                    </div>
                    <div *ngIf="username.errors.minlength">
                      Name must be at least 4 characters long.
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="name">Email</label>
                  <input id="email" type="email" class="form-control" formControlName="email" required>
                  <div *ngIf="email.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                    <div *ngIf="email.errors.required">
                      Email is required.
                    </div>
                    <div *ngIf="email.errors.email">
                      You must enter a valid email address
                    </div>
                  </div>
                </div>

                <div class="form-group">
                  <label for="password">Password</label>
                  <input id="password" type="password" class="form-control" formControlName="password" required>
                  <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
                    <div *ngIf="password.errors.required">
                      Password is required.
                    </div>
                    <div *ngIf="password.errors.minlength">
                      Password must be at least 4 characters long.
                    </div>
                  </div>
                </div>
              </div>

              <button class="button" type="submit" >Register</button>
            </div>
          </form>

          <div class="submitted-message" *ngIf="formDir.submitted && heroForm.valid">
            <p>You've registered your with user {{ heroForm.value.username }}!</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>