CSS Styling tabs in angular.ui bootstrap

Question

I'm in the process of moving a site to AngularJS. The original site uses Bootstrap and I was hoping to use Angular.ui bootstrap to keep the Bootstrap elements. However, I'm having some problems with working out how to apply CSS styles to tabs using Angular.ui bootstrap.

The original HTML looks like this:

<div class="container-fluid">
  <div class="row">
    <!-- Nav tabs -->
    <ul class="nav nav-tabs central">
      <li class="active"><a href="#tab-one" data-toggle="tab">Tab One</a></li>
      <li><a href="#tab-two" data-toggle="tab">Tab Two</a></li>
    </ul>
  </div>
</div>
<!-- Tab panes -->
<div class="container">
  <div class="row tab-content central">
    <div class="tab-pane fade in active col-lg-12" id="tab-one">
      <div class="row features animated fadeInLeft">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120"/></div>
          <h3>Some explanation</h3>
          <p>Some text.</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131"/></div>
          <h3>Some more explanation</h3>
          <p>Some more text.</p>
        </div>
      </div>
    </div>
    <div class="tab-pane fade col-lg-12" id="for-contractors">
      <div class="row features animated fadeInRight">
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120" alt="What we do"/></div>
            <h3>Some explanation 2</h3>
            <p>Some text 2.</p>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131" alt="Our mission"/></div>
            <h3>Some more explanation 2</h3>
            <p>Some more text 2.</p>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

This results in a tab pane running across the width of the page, with two centred tabs, and all the content in the tabs in centred.

With Angular.ui the code uses directives, and is much cleaner looking, but I can't get it to apply CSS styles that relate to centring.

<div class="contained-fluid">
  <div class="row central">
    <tabset>
      <tab>
        <tab-heading>Tab One</tab-heading>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120"></div>
          <h3>Some explanation</h3>
          <p>Some text.</p>
        </div>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131"/></div>
          <h3>Some more explanation</h3>
          <p>Some more text.</p>
        </div>
      </tab>
        <tab heading="Tab Two">
          <div class="row tab-content central">
            For Contractors
          </div>
        </tab>
        <div class="col-lg-4 col-md-4 col-sm-4">
          <div class="feature-img"><img src="/assets/feature1.png" width="124" height="120" alt="What we do"/></div>
            <h3>Some explanation 2</h3>
            <p>Some text 2.</p>
          </div>
          <div class="col-lg-4 col-md-4 col-sm-4">
            <div class="feature-img"><img src="/assets/feature2.png" width="131" height="131" alt="Our mission"/></div>
            <h3>Some more explanation 2</h3>
            <p>Some more text 2.</p>
          </div>
      </tabset>
    </div>
  </div>

How should I be applying the CSS classes to the Angular Directives?

Solution

You apply the CSS the same way you apply them normally:

.nav-tabs {
    /* custom styling */
}

Because angular compiles the directives after the fact, I use the browser's Inspector to see the classes: (from http://angular-ui.github.io/bootstrap/#/tabs)

<tabset><tab> compiles into:

<ul class="nav nav-tabs" ng-class="{'nav-stacked': vertical, 'nav-justified': justified}" ng-transclude="">
    <li ng-class="{active: active, disabled: disabled}" heading="Static title" class="ng-isolate-scope active">
        <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding">Static title</a>
    </li>
    ...

tabset also has vertical and justified options, if that's what you're looking for

Comments

[Raj]

How can i add a span tag inside that <a></a> tag. I just to want add a count in each tabs. How can i do that..? This is what i want. <a href="" ng-click="select()" tab-heading-transclude="" class="ng-binding"><span class="badge">5</span>Static title</a>