Angularjs UI Bootstrap: How to modify uib-tab CSS

Question

I am using the UI Bootstrap tabs, and I want to change the CSS for some of the components, but am not sure of how exactly to access the different elements.

The elements I would like to change are the text for the active tab, the text for the unactive tab, and the borders for both.

What is the correct syntax need to access these tabs in CSS?

Here is the uib-tab HTML I am using:

<uib-tabset>

    <uib-tab heading="Episodes"></uib-tab>

  <uib-tab heading="Categories"></uib-tab>

</uib-tabset>

I'm pretty new to CSS - apologies in advance...

Answer 1

You can simply edit bootstrap's css for .nav-tabs

.nav-tabs > li > a {
    border: 1px solid #000;
}

For active tab

.nav-tabs > li.active > a {
    /*CSS HERE*/
}

Optionally you can style the uib-tab class added by Angular:

.uib-tab a {
    border: 1px solid #000;
  }

For active uib-tab

.uib-tab.active a {
    /*CSS HERE*/
}