Notifications
Clear all
To make a Twitter Bootstrap navbar link active in PHP, you can use the active class provided by Bootstrap. Here's an example of how to do it:
Â
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="#">My Website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item <?php if ($active == 'home') {echo 'active';} ?>">
<a class="nav-link" href="index.php">Home</a>
</li>
<li class="nav-item <?php if ($active == 'about') {echo 'active';} ?>">
<a class="nav-link" href="about.php">About</a>
</li>
<li class="nav-item <?php if ($active == 'contact') {echo 'active';} ?>">
<a class="nav-link" href="contact.php">Contact</a>
</li>
</ul>
</div>
</nav>
Â
In this example, we are adding the active class to the nav-item the element that corresponds to the current page. To do this, we can set a variable called $active at the beginning of each page and then use it to determine which link should be active.
For example, on the index.php page, we can set $active it to 'home':
Â
<?php $active = 'home'; ?>
Â
On the about.php page, we can set $active to 'about':
Â
<?php $active = 'about'; ?>
Â
Â
And so on.
By using this approach, the navbar link that corresponds to the current page will be highlighted as active.
Â
Â
Â
Jayanta DK
Topic starter
Posted : 13/02/2023 7:46 am
Community Forum
We’re currently working on improving our forum experience.
Submit a Guest Post →
We review all submissions before publishing.