Bootstrap navbar Active State not working
You have included the minified Bootstrap js file and collapse/transition plugins while the docs state that:
Both bootstrap.js and bootstrap.min.js contain all plugins in a single file.
Include only one.
and
For simple transition effects, include transition.js once alongside the other JS files. If you're using the compiled (or minified) bootstrap.js, there is no need to include this—it's already there.
So that could well be your problem for the minimize problem.
For the active class, you have to manage it yourself, but it's just a line or two.
Bootstrap 3:
$(".nav a").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).parent().addClass("active");
});
Bootply: http://www.bootply.com/IsRfOyf0f9
Bootstrap 4:
$(".nav .nav-link").on("click", function(){
$(".nav").find(".active").removeClass("active");
$(this).addClass("active");
});
Here was my solution for switching active pages
$(document).ready(function() {
$('li.active').removeClass('active').removeAttr('aria-current');
$('a[href="' + location.pathname + '"]').closest('li').addClass('active').attr('aria-current', 'page');
});