Карусель Bootstrap - как уменьшить ширину img-wrapper?

Question

Я создал слайд-шоу с помощью Карусели Bootstrap.
Но мне не удалось сузить ширину img-wrapper.
Это то, что у меня сейчас: изображение моего слайд-шоу сейчас
Как мне сузить фиолетовую часть? Так он будет придерживаться картинки? Спасибо!!
slideshow.component.html:

<ngb-carousel #carousel="ngbCarousel" class="text-lg-center" #myCarousel="ngbCarousel" showNavigationArrows="true"
  interval="3000" pauseOnHover="false">
  <ng-template ngbSlide *ngFor="let image of images;let i = index" id="{{i}}">
    <div class="picsum-img-wrapper">
      <img [src]="image" alt="Random first slide" style=" max-height:300px; margin:0 auto;">
    </div>
    <div class="carousel-caption">
      <h3>{{titles[i]}}</h3>
    </div>
  </ng-template>
</ngb-carousel>

slideshow.component.css:

div{
    font-family: 'Varela Round', sans-serif;
}

.picsum-img-wrapper{
    background-color: blueviolet;
}

Answer 1

Вы можете обернуть свою карусель в Bootstrap столбцы, а затем вы можете настроить ее (изменив col-md-XX):

<div class="container">
  <div class="row">
    <div class="col-md-2">
      One of three columns
    </div>
    <div class="col-md-8">
      INSERT YOUR CAROUSEL HERE
    </div>
    <div class="col-md-2">
      One of three columns
    </div>
  </div>
</div>

Я также могу предложить использовать Bootstrap карусель: https://getbootstrap.com/docs/4.5/components/carousel/