Changing Color on Pills


Topic: Changing Color on Pills

EisGlockner asked 2 years ago

How to change color of the active pill? If it's not active it should stay white. Now it has the primary color.

<ul class="nav nav-pills nav-justified mb-3" id="ex1" role="tablist" style="width: 40%; margin: auto;">
<li class="nav-item" role="presentation">
    <a
            class="nav-link active"
            id="tab-login"
            data-toggle="pill"
            href="#pills-login"
            role="tab"
            aria-controls="pills-login"
            aria-selected="true"

    >Login</a
    >
</li>
<li class="nav-item" role="presentation">
    <a
            class="nav-link"
            id="tab-register"
            data-toggle="pill"
            href="#pills-register"
            role="tab"
            aria-controls="pills-register"
            aria-selected="false"
    >Register</a
    >
</li>


Marcin Luczak staff commented 2 years ago

Your code seems to be working fine. Here is a snippet for it showing that the first pill with class 'active" has primary color and the second pill without class 'active' stays white. https://mdbootstrap.com/snippets/standard/marcin-luczak/2546740?action=forum_snippet#html-tab-view

Or do you want to change the color of the active pill from primary to a different color?


EisGlockner commented 2 years ago

yeah exactly i want to change to color from primary to another color (example secondary). When i change the Backgroundcolor, the color get changed permanently. Not only when it's active. When the pill isn't activated, it should stay white


Marcin Luczak staff commented 2 years ago

For that you have to change the background color of the active pill class to a color of your need, e.g. for changing the background color of every pill inside .nav-pills list you would have to add this code to your style sheet:.nav-pills .nav-link.active { background-color: red;} I've updated snippet for that also.


EisGlockner commented 2 years ago

Awesome thanks!!


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB Standard
  • MDB Version: 1.0.0
  • Device: PC
  • Browser: Chrome
  • OS: Windows
  • Provided sample code: No
  • Provided link: No