Bootstrap Tabs in Concrete5

<!-- Nav tabs -->
<ul class="nav nav-tabs" role="tablist">
<?php
$tabs = $c->getAttribute('tabs');
for( $i=0; $i<$tabs; $i++ ) {
  if ($i == 0){
    echo '<li class="active"><a href="#tab' . $i . '" role="tab" data-toggle="tab">' . $c->getAttribute('tabs_label' . $i). '</a></li>';
  }else{
    echo '<li><a href="#tab' . $i . '" role="tab" data-toggle="tab">' . $c->getAttribute('tabs_label' . $i). '</a></li>';
  }
}
?>
</ul>

<!-- Tab panes -->
<div class="tab-content">
<?php
for( $i=0; $i<$tabs; $i++ ) {
  if ($i == 0){
    echo '<div class="tab-pane active" id="tab' . $i . '">';
  }else{
    echo '<div class="tab-pane" id="tab' . $i . '">';
  }
  $a = new Area('Tab' . $i);
  $a->display($c);
  echo '</div>';
}
?>
</div>