Convert List group to tabs in bootstrap

Question

I have dynamics powerapps portals that renders the tabs like below but my requirement is to change it to look like tabs. Powerapps portals uses bootstrap 3.3v.

the markup it generates is

 <ol class="progress list-group top">
  <li class="list-group-item active">General information</li>
  <li class="list-group-item incomplete">Fee</li>
  <li class="list-group-item incomplete">Personal details</li>
  <li class="list-group-item incomplete">Family details</li>
  <li class="list-group-item incomplete">Results</li>
  <li class="list-group-item incomplete">Declarations</li>
 </ol>

The markup for tabs that I would like to generate is :

<ul class="nav nav-tabs">
  <li class="active"><a href="#">General information</a></li>
  <li><a href="#">Fees</a></li>
  <li><a href="#">Personal detailsn</a></li>
  <li><a href="#">Family details</a></li>
  <li><a href="#">Results</a></li>
  <li><a href="#">Declarations</a></li>
</ul>

I am not sure how to replace it, should I traverse DOM in jQuery and then replace these classes or is there a way where I can just apply styles to the list group that will make it appear as tabs?