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...

Yug Kapoor · Accepted Answer · 2016-01-24 16:02:43Z

12

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*/
}

answered Jan 24, 2016 at 16:02

Yug Kapoor

7855 silver badges10 bronze badges

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

4 Comments

Mohit Sehgal Over a year ago

I want different set of tabs 1. Tabset 1 has different Style 2. Tabset 2 has different style Possibly use classes but how?

Yug Kapoor Over a year ago

@MohitSehgal you can add a class attribute to uib-tabset tag like: <uib-tabset class="mycustomclass"> .... </uib-tabset> . This class will be added to div wrapping the ui tabs.

Mohit Sehgal Over a year ago

I tried it but it is not selecting tabs, it is selecting text inside the tab

Yug Kapoor Over a year ago

@MohitSehgal can you share a fiddle with the exact code you are using?

Collectives™ on Stack Overflow

Angularjs UI Bootstrap: How to modify uib-tab CSS

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related