Carousel Bootstrap - how to narrow the width of the img-wrapper?

Question

I created a slideshow with the help of Carousel Bootstrap.
But I was unable to narrow the width of the img-wrapper.
This is what i have now: picture of my slideshow now
How can I narrow the purple part? So it will stick to the picture? Thank you!!
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

You could wrap your carousel in Bootstrap columns, and then you can adjust it (by changing 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>

I can also suggest using the Bootstrap carousel: https://getbootstrap.com/docs/4.5/components/carousel/