New Toronto Group
 - New Toronto Group

Styling AngularJS UI Bootstrap Tabs

| Posted on February 09th, 2016 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 Final Style

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.

Posted in AngularJS, ui bootstrap, tabs, css, style  | Comments (0)

Comments (0)


Add a Comment





To use reCAPTCHA you must get an API key from http://recaptcha.net/api/getkey

Allowed tags: <b><i><br>Add a new comment: