Bootstrap carousel indicators are square; I want them round
Add border-radius
:
.carousel-indicators > li {
border-radius: 50%;
}
Note that you have to target the li
tags within the carousel-indicators
class and also do 50%
not 100%
.
So you don't have to use !important
to override the default border-radius:
#myCarousel-indicators > li {
border-radius: 50%;
}
<ol id="myCarousel-indicators" class="carousel-indicators"></ol>
#myCarousel-indicators li{
border-radius: 50%;
width: 12px;
height: 12px;
}
.carousel-indicators li{
border-radius: 50%;
width: 12px;
height: 12px;
}
<ol id="myCarousel-indicators" class="carousel-indicators"></ol>
For Bootstrap 4 I did this in my style sheet:
.carousel-indicators li {
border-radius: 12px;
width: 12px;
height: 12px;
background-color: #404040;
}
For Bootstrap 5
, styling changed a little. I was able to achieve round indicators mixing SCSS variables with a css style:
This sets indicadors square, instead of rectanglular
$carousel-indicator-width: 10px;
$carousel-indicator-height: 10px;
This rounds the corners
.carousel .carousel-indicators button {
border-radius: 50%;
}