title: Mixing Bootstrap classes and ignoring style
body: <p>I have a carousel that I made with the help of bootstrap. I am trying to replace the carousel-indicators (the "dot navigation") with a navbar. This is the code for the standard dot-navigation</p>
  
  <pre><code>        &lt;!-- Indicators dot nav --&gt;
          &lt;ul class="carousel-indicators"&gt;
              &lt;li data-target="#my-carousel" data-slide-to="0" class="active"&gt;&lt;/li&gt;
              &lt;li data-target="#my-carousel" data-slide-to="1"&gt;&lt;/li&gt;
              &lt;li data-target="#my-carousel" data-slide-to="2"&gt;&lt;/li&gt;
          &lt;/ul&gt;
  </code></pre>
  
  <p>I have replaced that with this navbar:</p>
  
  <pre><code>&lt;!-- Navigation bar controls --&gt;
  &lt;nav class="navbar navbar-inverse"&gt;
      &lt;div class="container"&gt;
          &lt;div class="navbar-header"&gt;
              &lt;button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar"&gt;
              &lt;span class="sr-only"&gt;Toggle navigation&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;/button&gt;
          &lt;/div&gt;
          &lt;div id="navbar" class="collapse navbar-collapse"&gt;
              &lt;ol class="nav navbar-nav"&gt;
                  &lt;li class="nav-item active" data-target="#my-carousel" data-slide-to="0"&gt;&lt;a&gt;slide 1&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="nav-item" data-target="#my-carousel" data-slide-to="1"&gt;&lt;a&gt;slide 2&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="nav-item" data-target="#my-carousel" data-slide-to="2"&gt;&lt;a&gt;slide 3&lt;/a&gt;&lt;/li&gt;
              &lt;/ol&gt;
          &lt;/div&gt;&lt;!--/.nav-collapse --&gt;
      &lt;/div&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>The problem is, I want to maintain the functionality of the carousel-indicators class. To do this, I can add carousel-indicators to the ol like this:</p>
  
  <p><code>&lt;ol class="nav navbar-nav carousel-indicators"&gt;</code></p>
  
  <p>But this obviously alters the style of the navbar, and it becomes quite complicated to fix. I can fix it very cleanly and simply by altering a line of code in the bootstrap javascript in the carousel class from this:</p>
  
  <pre><code>this.$indicators = this.$element.find('.carousel-indicators')
  </code></pre>
  
  <p>to this</p>
  
  <pre><code>this.$indicators = this.$element.find('.nav')
  </code></pre>
  
  <p>And that fixes my problem, but this feels very improper. What is the correct way to go about fixing this?</p>