Angularjs UI Bootstrap: how to change uib-tab CSS

Question

I use the Bootstrap UI tabs and I want to change the CSS for some components, but not sure how to access the various elements exactly.

The elements that I would like to change are the text for the active tab, the text for the inactive tab, and the border for both.

What is the correct syntax for accessing these tabs in CSS?

Here is the uib-tab HTML code that I am using:

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

I'm new to CSS - sorry in advance ...

Answer 1

You can simply edit bootstrap css for .nav-tabs

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

For active tab

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

If you wish, you can create the uib-tab class added by Angular:

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

For active uib-tab

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