Instead of using the ul and li tags, I have implemented three tabs with buttons. My goal is to automatically make the first button active or change its color to green. Despite using the active class in bootstrap, it does not seem to work as expected. How can I achieve this so that users can easily identify their current location? You can view my code on jsfiddle: https://jsfiddle.net/heuvkro0/5/
<div class="nav nav-pills mt-4">
<button class="nav-link active btn btn-sm text-light bg-info font-weight-bold float-left" href="#profile" role="tab" data-toggle="tab">
<span class="number text-light">1</span>
<span class="title text-light font-weight-bold pr-2">Beneficiary Details </span>
</button>
<button class="nav-link btn btn-sm text-light bg-info font-weight-bold float-left ml-2" href="#buzz" role="tab" data-toggle="tab">
<span class="number text-light">2</span>
<span class="title text-light font-weight-bold pr-2">Dependent Details </span>
</button>
<button class="nav-link btn btn-sm text-light bg-info font-weight-bold float-left ml-2" href="#references" role="tab" data-toggle="tab">
<span class="number text-light">3</span>
<span class="title text-light font-weight-bold pr-2">Complete Details </span>
</button>
</div>