title: Styling bootstrap carousel indicators into dots
body: <p>Bit of a bootstrap noob here, I'm trying to style the carousel indicators in bootstrap to be dots instead of the default rectangles they give you. I have the carousel working and I'm trying to change the indicators through css by accessing as so:</p>
  
  <pre><code>.carousel-indicators li {
      border-radius: 50%;
      height: 30px;
      width: 30px;
  
  }
  </code></pre>
  
  <p>The output does create circles, <a href="https://imgur.com/a/KMo3Z" rel="nofollow noreferrer">like so</a>, but the circles are too large, so I try changing the code to be:</p>
  
  <pre><code>.carousel-indicators li {
      border-radius: 50%;
      height: 10px;
      width: 10px;
  
  }
  </code></pre>
  
  <p>and instead of the circles getting smaller, (at least I'm assuming that's what is supposed to happen..) they end up looking more like <a href="https://imgur.com/a/urar1" rel="nofollow noreferrer">this</a>.  I can't seem to find a way to work around this.  Does any body know how to fix this with CSS or another way around to having dots for the indicators instead of rectangles?  Much appreciated!</p>