I have a problem with carousel control buttons bootstrap as show in this photo :

But as soon as i disable width: 15% in the the devTools in chrome i don't have that problem any more :

I tried to set width: auto but couldn’t figure out how to fix that in my code below, is there any way to disable the width of the carousel-control-prev and carousel-control-next :

.carousel {
  display: flex;
  .carousel-inner {
    .carousel-item {
      .testimony {
        display: flex;
        img {
          width: 150px;
          height: 150px;
          object-fit: cover;
          aspect-ratio: 1;
          border-radius: 75px;
          margin-right: 27px;
        }
        .name {
          font-weight: bold;
          display: block;
        }
      }
    }
  }
  .carousel-control-prev,
  .carousel-control-next {
    position: relative;
    opacity: 1;
  }
  .carousel-control-prev-icon {
    width: 50px;
    height: 50px;
    mask-image: url("../../public/img/carousel-arrow.svg");
    background-color: $red;
    transition: background-color 100ms ease-in, opacity 100ms ease-in;
    &:hover {
      background-color: #DF011F;
      opacity: 0.8;
    }
  }
  .carousel-control-next-icon {
    width: 50px;
    height: 50px;
    mask-image: url("../../public/img/carousel-arrow.svg");
    transform: rotate(180deg);
    background-color: $red;
    transition: background-color 100ms ease-in, opacity 100ms ease-in;
    &:hover {
      background-color: #DF011F;
      opacity: 0.8;
    }
  }
  @include media-breakpoint-down(md) {
    .carousel-control-prev-icon {
      transform: scale(0.75);
    }
    .carousel-control-next-icon {
      transform: rotate(180deg) scale(0.75);
    }
  }
}

<div id="carousel"  data-bs-ride="carousel">
  <button  type="button" data-bs-target="#carousel" data-bs-slide="prev">
    <span  aria-hidden="true"></span>
    <span >Previous</span>
  </button>
  <div >
    <div >
      <div >
        <img src="{{ asset('img/talents/sylvie.jpg') }}" alt="john doe" >
        <div>
          <p>test</p>
          <span >John Doe</span>
          <span >Chief</span>
        </div>
      </div>
    </div>
  </div>
  <button  type="button" data-bs-target="#carousel" data-bs-slide="next">
    <span  aria-hidden="true"></span>
    <span >Next</span>
  </button>
</div>

CodePudding user response：

To override bootstrap default styles simply add a !important to the end of you CSS style.

In this case that would be:

carousel-control-next, carousel-control-prev {
    width: 0 !important;
}

CodePudding user response：

I fixed it by doing :

.carousel-control-prev, .carousel-control-next { width: auto !important; }