How to modify Bootstrap carousel next/prev icons Thickness

Question

I'm starting to learn HTML/CSS and Bootstrap.

I have a carousel with the following next/prev buttons:

<button class="carousel-control-prev" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="prev">
   <span class="carousel-control-prev-icon" aria-hidden="true"></span>
   <span class="visually-hidden"> Previous </span>
</button>

<button class="carousel-control-next" type="button" data-bs-target="#testimonials-carousel" data-bs-slide="next">
   <span class="carousel-control-next-icon" aria-hidden="true"></span>
   <span class="visually-hidden"> Next </span>
</button>

I would like to change the thickness of the buttons so I tried to add this code in my CSS stylesheet:

.carousel-control-prev {
    border-width: 35px;
}

.carousel-control-next {
    border-width: 35px;
}

I also tried:

.carousel-control-prev-icon {
    border-width: 35px;
}

.carousel-control-next-icon {
    border-width: 35px;
}

But this has no effect. Just to be clear, I am not trying to change the height/width of the buttons but the thickness . Do you have any idea how I could achieve this?

Thank you !

Answer 1

Bootstrap v5 uses a pre-defined set of icons ( https://getbootstrap.com/docs/5.2/extend/icons/ ). In earlier versions, it has been Glyphicons ( https://getbootstrap.com/docs/3.3/components/ ). You may change the referenced icon within the set (if one suits you), the icon set itself (to eg Font Awesome, Material Design Icons, ...) or, if ambitious enough, create an own icon for that purpose that you link in with CSS.

According to the Bootstrap Manual you may also re-define the $carousel-control-prev-icon-bg and $carousel-control-next-icon-bg variables with whatever SVG data you prefer ( https://getbootstrap.com/docs/5.2/components/carousel/ )