update vertical pill tabs

evap/evaluation/templates/bootstrap_form_pill_group.html

 <div class="mb-3 d-md-flex">
-    <div class="col-md-2">
-        <div class="nav nav-pills btn-switch btn-group-vertical float-end" role="tablist">
+    <div class="col-md-2 pe-4">
+        <div class="nav flex-column nav-pills" role="tablist">
             {% for field in fields %}
-                <a class="px-2 py-1 space-normal fw-bold btn btn-light text-center nav-link {% if forloop.first %}show active{% endif %}" href="#tab-{{ field.id_for_label }}" data-bs-toggle="pill" role="tab" aria-controls="pills-{{ field.label }}" aria-selected="{% if forloop.first %}true{% endif %}">
+                <button class="nav-link text-end{% if forloop.first %} active{% endif %}" data-bs-toggle="pill" data-bs-target="#tab-{{ field.id_for_label }}" type="button" role="tab">
                     {{ field.label }}
-                </a>
+                </button>
             {% endfor %}
         </div>
     </div>
     <div class="tab-content col-md-10">
         {% for field in fields %}
-            <div class="tab-pane fade {% if forloop.first %}show active{% endif %}" id="tab-{{ field.id_for_label }}" role="tabpanel" aria-labelledby="pills-{{ field.label }}-tab">
+            <div class="tab-pane fade{% if forloop.first %} show active{% endif %}" id="tab-{{ field.id_for_label }}" role="tabpanel">
                 {% include 'bootstrap_form_field_widget.html' with field=field %}
             </div>
         {% endfor %}