Back
Syntax
Study
Editor
Mode:
HTML
CSS
JavaScript
PHP
Reset
Run »
HTML / CSS / JS
<nav class="position-fixed bottom-0 start-0 end-0 bg-white border-top d-flex d-md-none" style="z-index:1000"> <a class="flex-fill text-center py-2 nav-item active" href="#home"><i class="bi bi-house d-block"></i><small>Home</small></a> <a class="flex-fill text-center py-2 nav-item" href="#search"><i class="bi bi-search d-block"></i><small>Search</small></a> <a class="flex-fill text-center py-2 nav-item" href="#profile"><i class="bi bi-person d-block"></i><small>Profile</small></a> </nav> <script> $(".nav-item").on("click", function() { $(".nav-item").removeClass("active"); $(this).addClass("active"); }); </script>
Result
Open