unable to center image in ng2-bootstrap carousel (bootstrap 4)

Question

I am unable to center an image in the ng2-bootstrap carousel. According to the bootstrap 4 documentation, we should only need to use the img-fluid class.

<img class="img-fluid" [src]="slidez.image">

Here is my entire div:

<div class="row">
    <div class="col-md-12">
        <carousel [interval]="myInterval" [noWrap]="noWrapSlides">
          <slide *ngFor="let slidez of slides; let index=index"
                 [active]="slidez.active">
            <img class="img-fluid" [src]="slidez.image">

            <div class="carousel-caption">
              <h4>Slide {{index}}</h4>

              <p>{{slidez.text}}</p>
            </div>
          </slide>
        </carousel>
    </div>
</div>

I've also tried both "center-block" and "img-responsive" classes from bootstrap 3, but no dice. Any ideas?

Answer 1

It turns out Bootstrap 4 deprecates "text-center". Instead, I used "text-lg-center" like so...

<carousel class="text-lg-center" [interval]="myInterval" [noWrap]="noWrapSlides">