title: How can I change Bootstrap carousel indicators into dots?
body: <p>I am using Bootstrap 4 Beta 2 version to do a carousel. The code looks like below: </p>
  
  <pre><code>                &lt;ol class="carousel-indicators"&gt;
                      &lt;li data-target="#mycarousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
                      &lt;li data-target="#mycarousel" data-slide-to="1" &gt;&lt;/li&gt;
                      &lt;li data-target="#mycarousel" data-slide-to="2" &gt;&lt;/li&gt;
                  &lt;/ol&gt;
  </code></pre>
  
  <p>And the carousel indicator show as lines: 
  <a href="https://i.stack.imgur.com/opi07.png" rel="noreferrer"><img src="https://i.stack.imgur.com/opi07.png" alt="enter image description here"></a></p>
  
  <p>Is there a way I can change the indicators into dots instead of lines? I would assume it is an bootstrap option but I didn't find that relevant document. Do I need to write custom css for that? </p>