Bootstrap Carousel Indicators Are Square; I Want Them Round

I have just successfully set up a 3-image carousel on my site using Bootstrap. This is what it looks like: If you notice, the indicators are square and I want them to be round! Al

Solution 1:

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>

Solution 2:

For Bootstrap 4 I did this in my style sheet:

.carousel-indicators li {
    border-radius: 12px;
    width: 12px;
    height: 12px;
    background-color: #404040;
}

Solution 3:

You can try this:

.glyphicon-chevron-right:before, .glyphicon-chevron-left:before {
    background-color: #000;
    padding: 5px;
    border-radius: 50%;
}

Solution 4:

For Exact circle please make sure that you have same width and height then it will give you the exact circle with border-radius: 50%;

.carousel-indicators li{
  border-radius:50%
  width:15px;
  height:15px;
  background-color:#aaa;}

Solution 5:

#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>