Add a Triangle to denote selected nav item in Bootstrap - css

Question

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:
<nav class="navbar navbar-dark bg-info horizontal-nav">
<ul class="nav navbar-nav list-inline">
<li>home</li>
<li class="selected">about</li>
<li>contact</li>
</ul>
</nav>
<nav class="navbar horizontal-nav navbar-light bg-faded">
<ul class="nav navbar-nav list-inline">
<li>intro</li>
<li>service</li>
</ul>
</nav>
When this renders, it looks something like this:
+---------------------------------------+
| home about contact |
+---------------------------------------+
| intro service |
+---------------------------------------+
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:
+---------------------------------------+
| home about contact |
+----------^----------------------------+
| intro service |
+------------^--------------------------+
How do I do that with CSS / Bootstrap? Thank you!

Answer 1

Use content after to create the shape and then add it to the active Bootstrap state. See example.
.navbar.navbar-dark,
.navbar.navbar-light {
height: 60px;
}
nav.navbar .navbar-nav li.nav-item.active:after {
content: "";
position: relative;
margin-left: -15px;
left: 50%;
top: -20px;
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid white;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha/css/bootstrap.min.css" rel="stylesheet" />
<hr>
<div class="container">
<nav class="navbar navbar-dark bg-info">
<ul class="nav navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">About</a>
</li>
<li class="nav-item"> <a class="nav-link" href="#">Contact</a>
</li>
</ul>
</nav>
</div>
<hr>
<div class="container">
<nav class="navbar navbar-light bg-faded">
<ul class="nav navbar-nav">
<li class="nav-item active"> <a class="nav-link" href="#">Intro <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item active"> <a class="nav-link" href="#">Services</a>
</li>
</ul>
</nav>
</div>