'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:

enter image description here

If you notice, the indicators are square and I want them to be round! All the tutorials I have followed thus far seem to get it right; I have never seen anyone else's carousel with square indicators. Here's my HTML:

<!-- Carousel start -->
<div id="myCarousel" class="carousel slide">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active"></li>
    <li data-target="#myCarousel" data-slide-to="1"></li>
    <li data-target="#myCarousel" data-slide-to="2"></li>
  </ol>
  <div class="carousel-inner">
    <div class="item active">
      <img src="bootstrap/img/home-page-banner.jpg"/>
      <div class="container">
        <div class="carousel-caption">
          <h1>Heading One</h1>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
          <p><a class="btn btn-large btn-primary">Sign up!</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="bootstrap/img/home-page-banner.jpg"/>
      <div class="container">
        <div class="carousel-caption">
          <h1>Heading One</h1>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
          <p><a class="btn btn-large btn-primary">Sign up!</a></p>
        </div>
      </div>
    </div>
    <div class="item">
      <img src="bootstrap/img/home-page-banner.jpg"/>
      <div class="container">
        <div class="carousel-caption">
          <h1>Heading One</h1>
          <p>Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum </p>
          <p><a class="btn btn-large btn-primary">Sign up!</a></p>
        </div>
      </div>
    </div>
  </div>
  <a class="left carousel-control" href="#myCarousel" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left"></span>
  </a>
  <a class="right carousel-control" href="#myCarousel" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right"></span>
  </a>
</div>
<!-- Carousel end -->

What do you think I am going wrong with here? Is there any class I should be using with the carousel-indicators <ol> that I am not aware of yet?

P.s.: I have already tried .carousel-indicators { border-radius: 100%;} with no success.

htmlcss


Solution 1:[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:[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:[3]

You can try this:

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

Solution 4:[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:[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>

Solution 6:[6]

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%;
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 Bo Christian Skjøtt
Solution 3 Tushar Khatiwada
Solution 4 Engr Hassaan Ashraf
Solution 5 user16067860
Solution 6 JoeGalind

Related Questions