title: Add a Triangle to denote selected nav item in Bootstrap
body: <p>I have a site that I've created with Bootstrap. At the top of my site, I have two rows for navigation. The code for those rows looks like this:</p>
  
  <pre><code>&lt;nav class="navbar navbar-dark bg-info horizontal-nav"&gt;
    &lt;ul class="nav navbar-nav list-inline"&gt;
      &lt;li&gt;&lt;a href="/" class="btn btn-basic"&gt;home&lt;/a&gt;&lt;/li&gt;
      &lt;li class="selected"&gt;&lt;a href="/about" class="btn btn-basic"&gt;about&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/contact" class="btn btn-basic"&gt;contact&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;nav class="navbar horizontal-nav navbar-light bg-faded"&gt;
    &lt;ul class="nav navbar-nav list-inline"&gt;
      &lt;li&gt;&lt;a href="/about/us" class="btn btn-basic"&gt;intro&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a href="/about/service" class="btn btn-basic"&gt;service&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/nav&gt;
  </code></pre>
  
  <p>When this renders, it looks something like this:</p>
  
  <pre><code>+---------------------------------------+
  | home   about   contact                |
  +---------------------------------------+
  | intro   service                       |
  +---------------------------------------+
  </code></pre>
  
  <p>I'm trying to show a triangle for a selected item. So that way the user knows where they are at. In essence, I'm trying to do something like this:</p>
  
  <pre><code>+---------------------------------------+
  | home   about   contact                |
  +----------^----------------------------+
  | intro   service                       |
  +------------^--------------------------+
  </code></pre>
  
  <p>How do I do that with CSS / Bootstrap? Thank you!</p>