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?

On which specific elements do you need CSS? I don't see where it is missing by comparing the two codes — floribon
– floribon, Commented Jan 8, 2015 at 23:08

benri · Accepted Answer · 2015-01-09 01:10:24Z

4

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

answered Jan 9, 2015 at 1:10

benri

1616 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Raj Over a year ago

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>

add-Naan · Accepted Answer · 2015-04-08 16:39:45Z

if you use the code below it will save you some time, and it compiles to the same ul>li>a format and to answer the question about style in the css file add ul li a {font-size:x-large;} of course you need a tab controller and a list of titles and html pages to include in the tabs

 <div data-ng-controller="TabCtrl" class="col-md-12">
     <tabset id="tabs1">
        <tab data-ng-repeat="tab in tabs" heading="{{tab.title}}" >
            <div data-ng-model="tab"  data-ng-click="isSelected($index)" data-ng-change="update()">
                <div ng-include="tab.url">                    
                </div>                               
            </div>                        
         </tab>
    </tabset>
 </div>

Collectives™ on Stack Overflow

CSS Styling tabs in angular.ui bootstrap

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related