Bootstrap nav pills - 'active' class doesn't work in opened modal

Question

I have following code for nav-pills component:

  <ul id="steps" class="nav nav-pills form-steps">
    <li class="active"><a data-toggle="pill" href="#options"></a></li>
    <li><a data-toggle="pill" href="#payments"></a></li>
  </ul>

This is how the look of active a is made (basically it's just a circle filled with special color):

.form-steps > li.active > a {
    background-color: #931f2a;
}

And here's code for a regular a :

.promoter-form-steps > li > a {
    border: 2px solid #931f2at;
    height: 30px;
    width: 30px;
    border-radius: 100%;
}

I suppose that by adding .active class to corresponding li element makes a element filled with color, but it doesn't when I open modal where this component is placed for the fist time. When I open modal for the second time after I click on another link, I see correct behavior, ie .active class is filled with color. It's an SPA and I have another nav-pills like this with exact markup and it works just fine and I don't quite understand why this behavior doesn't work on second nav-pills . I double checked that class names and ids don't repeat each others and I am sure that no custom js was involved into this. Can you please give me a direction to inspect what I did wrong? Thanks in advance!

Answer 1

Here's the recommended format as determined by Twitter Docs:

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Active</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" href="#">Link</a>
  </li>
  <li class="nav-item">
    <a class="nav-link disabled" href="#">Disabled</a>
  </li>
</ul>

Your list tags need to have a class of nav-item and your anchors need a class of nav-link before it can use the active class