Styling AngularJS UI Bootstrap Tabs
Feb 09 2016 09:53pm | | Share

Styling AngularJS UI Bootstrap Tabs

By Chad Upton

When you're building with AngularJS UI Bootstrap and want to give your tabbed application that custom look, then you're in the right place!

To keep this example familiar, I modified (and simplified) the UI Bootstrap tab example in Plnkr. This is the final result:

Tabs

Creating the two tabs with UI Bootstrap is very simple. We just create a uib-tab element for each tab and surround those with a uib-tabset element:

HTML

Styling the UI Bootstrap tabs is fairly straight forward too. First of all, you may have noticed I added a tab-container div in each tab to help with styling. We're also going to use the li.active a.ng-binding to style the active tab and li a.ng-binding to style the other tabs. The styles marked with !important may not seem necessary at first, but they ensure that those styles remain after clicking between tabs:

CSS

If you want to play around with this code or expand on it, you can load up the code here on Plnkr. If you're looking for additional help with your web app or need AngularJS (or other) training, don't hesitate to contact our sales team.

PS - The sample text used in this demo is from the DJ Khaled Lorem Ipsum Generator.

http://khaledipsum.com/