CODEWITHSUNDEEP
bootstrap-4
Hussain
Hussain

Reputation: 5177

Active nav pill to have same color as info button

The active nav pills by default have primary color. How can I elegantly apply info color?

<nav className="nav flex-column nav-pills">
  <a className="nav-link active" href="#">Dashboard</a>
  <a className="nav-link" href="#">Apps</a>
</nav>

This is is how the nav bar looks.

enter image description here

I want the color of active pill to be info

Upvotes: 0

Views: 172

Answers (1)

Carol Skelly
Carol Skelly

Reputation: 362300

You can reference the info CSS variable like this...

.nav-pills .nav-link.active {
    background-color: var(--info);
}

Demo

Or, using SASS...

@import "bootstrap/functions";
@import "bootstrap/variables";

$nav-pills-link-active-bg: theme-color("info");

@import "bootstrap";

Demo 2

Upvotes: 1

Related Questions