title: bootstrap3 - caret reverse on click in navbar-nav
body: <p>I'm using bootstrap 3, and I found few lines of css, that work great, making the caret to reverse (upside-down) on click.</p>
  
  <pre><code>.navbar-nav .open &gt; a &gt; b.caret {
    border-top: none;
    border-bottom: 4px solid;
  }
  </code></pre>
  
  <p>For your reference, this is my (pretty standard) dropdown:</p>
  
  <pre><code>&lt;ul class="nav navbar-nav navbar-right"&gt;
    &lt;li class="dropdown"&gt;
      &lt;a href="#" class="dropdown-toggle" data-toggle="dropdown"&gt;
        Some Title Text &lt;b class="caret"&gt;&lt;/b&gt;
      &lt;/a&gt;
      &lt;ul class="dropdown-menu"&gt;
        &lt;li&gt;Some Submenu text&lt;/li&gt;
        &lt;li&gt;Some Submenu text&lt;/li&gt;
      &lt;/ul&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Why is this happening? I would like your help to deeply understand it.
  Thank you!</p>