fbpx Skip to content

Aquent | DEV6

Styling AngularJS UI Bootstrap Tabs

Written 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:

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:

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.

Sign up for our Angular Course

Learn the most recent version and start building your own Angular apps

view course details