Bootstrap 4 navbar active backgroup color

Question

In a Bootstrap 3 navbar when a link is active, the link background color is changed to show that its the active link. This seems to be missing in Bootstrap 4. Is there a way to show this or do I need to override the active class?

The Bootstrap 3 navbar shown below. You can see the active home link is highlighted How do I show this in Bootstrap 4.

The angular 5 code below

  <div class="navbar-collapse" [ngbCollapse]="navbarCollapsed" id="navbarContent">
    <ul class="nav navbar-nav mr-auto">
      <li class="nav-item" [routerLinkActive]="['active']" [routerLinkActiveOptions]="{exact:true}">
        <a class="nav-link" [routerLink]="['/home']" (click)="navbarCollapsed = true">HOME</a>
      </li>
      <li class="nav-item" [routerLinkActive]="['active']">
        <a class="nav-link" [routerLink]="['/page1']" (click)="navbarCollapsed = true">Page 1</a>
      </li>
    </ul>
  </div>

Try checking this issue if it works for you https://stackoverflow.com/questions/46172769/angular-2-4-routerlinkactive-not-working-properly — Nandita Sharma, May 14 '18 at 12:15
Simply add css like `.active { background:#4FA9DC; color:#000;}` — Javascript Hupp Technologies, May 14 '18 at 12:17
@NanditaAroraSharma thanks but I am already on Angular 5. Also the link is showing as active. Its just the background color thats missing. — BeesNees, May 14 '18 at 12:30
Yeah just checked, seems like bootstrap removed background-color styles for active class in navbar . You can use the @JavascriptHuppTechnologies answer — Nandita Sharma, May 14 '18 at 12:32
@JavascriptHuppTechnologies had to add the css as you said. If you want to add it as an aswer I can mark it as the correct one. — BeesNees, May 17 '18 at 02:56

score 6 · Accepted Answer · edited Feb 09 '19 at 22:27

6

Bootstrap 4 doesn't have css for active class.

So you have to add css by your self

Simply add css like

.active {
   background:#4FA9DC; color:#000;
}

edited Feb 09 '19 at 22:27

Leandro Bardelli

10,561
15
79
116

answered May 17 '18 at 05:17

Javascript Hupp Technologies

1,997
2
12
27

score 0 · Answer 2 · answered May 14 '18 at 12:28

The [routerLinkActive] property defines the css class which will be appended to the element once it matches the defined route.

So in your case, the active class will be appended to the element. What you need to do is define a the active class in your css file, as @JavascriptHuppTechnologies suggested in the comments.

score 0 · Answer 3 · answered May 14 '18 at 13:19

0

The .active class is being applied, but it won't be visible unless the Navbar has the navbar-dark or navbar-light classes which it used to determine the color of the active links...

Use navbar-dark for a light/white links on darker backgrounds
Use navbar-light for a dark/gray links on lighter backgrounds

answered May 14 '18 at 13:19

Carol Skelly

351,302
90
710
624

I am using navbar-light. My question is on the background styling as shown in the screenshot. That is missing, but the active class is applied. – BeesNees May 14 '18 at 14:00
Bootstrap 4 doesn't apply a background so add custom CSS – Carol Skelly May 14 '18 at 14:22

score 0 · Answer 4 · edited Jul 14 '21 at 08:00

<nav class="nav nav-pills">
  <a class="nav-link" [routerLink]="['your_path1']" [routerLinkActive]="'active'">item1</a>
  <a class="nav-link" [routerLink]="['your_path2']" [routerLinkActive]="'active'">item2</a>
  <a class="nav-link" [routerLink]="['your_path3']" [routerLinkActive]="'active'">item3</a>
</nav>

use nav-pills for background color and add the class 'active' for routerLinkActive

Bootstrap 4 navbar active backgroup color

4 Answers4