$3.47

How can I change the color of the Bootstrap's active link

Ask a question+
0

I have a vertical nav that I took from the Bootstrap page. Now, as I click different links I want to change the color of the active link and add a right border to it.

Here is my current code:

.navbar-sidenav {
    position: relative;
    flex-direction: column;
    background-color: #f1f1f1;
}
<ul class="nav navbar-sidenav">
    <li class="nav-item active">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-tachometer-alt margin-r"></i>Dashboard</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>Users</a>
    </li>
    <li class="nav-item">
        <a class="nav-link nav-link-p" href="#"><i class="fas fa-users margin-r"></i>About</a>
    </li>
</ul>



<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
add comment

0 Answer

Your Answer