title: Bootstrap 4 highlight navbar Active
body: <p>How to highlight the current page on click ?</p>
  
  <p>The nav-bar</p>
  
  <pre><code>&lt;div class="collapse navbar-collapse" id="navbarNavAltMarkup"&gt;
      &lt;ul class="navbar-nav"&gt;
          &lt;li class="nav-item active"&gt;
              &lt;a class="nav-link active" href="{% url 'page1' %}"&gt; Football
                  &lt;span class="sr-only"&gt;(current)&lt;/span&gt;&lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-item"&gt;
              &lt;a class="nav-link" href="{% url 'page2' %}"&gt;Overview&lt;/a&gt;
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>The script at the end of the .html</p>
  
  <pre><code>&lt;script src="{% static "JS/master.js" %}" type="text/javascript"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>The .JS</p>
  
  <pre><code>$(".nav .nav-link").on("click", function(){
     $(".nav").find(".active").removeClass("active");
     $(this).addClass("active");
  });
  </code></pre>
  
  <p>P.S I have never done JS before</p>