Search code examples
htmlcssbootstrap-4navnav-pills

Change Bootstrsp 4 Active Pills Background

I was trying to find the answer to my question.

No one really had what i was looking for. All they could was change the background color when the nav pill was focused.

So what i did was open the bootstrap 4 CSS file and found my own answer.

So for anyone looking to use bootstrap 4 nav pills and want to change the background color.

Please use the following code

.nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: #007bff;
}

this will allow you to change the background color of active nav pills.

I hope this helps a lot of people as I couldn't find the answer to this question anywhere.

Solution

  • I was trying to find the answer to my question.

    No one really had what i was looking for. All they could was change the background color when the nav pill was focused.

    So what i did was open the bootstrap 4 CSS file and found my own answer.

    So for anyone looking to use bootstrap 4 nav pills and want to change the background color.

    Please use the following code

    .nav-pills .nav-link.active,
.nav-pills .show > .nav-link {
color: #fff;
background-color: #007bff;
}

    this will allow you to change the background color of active nav pills.

    I hope this helps a lot of people as I couldn't find the answer to this question anywhere.