Underline active Tab

By default the active tab has an underline as an indicator. No extra classes have to be added.

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Messages

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Button active Tab

To use a button as an active tab indicator, add class button-indicator to the .nav-tabs element.

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Messages

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Choose indicator style

Default Tabs

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Messages

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Tabs With Dropdown

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Veritatis, molestiae, placeat, quos, harum modi perspiciatis et necessitatibus deleniti enim sit quia deserunt ipsam magni error esse nobis inventore minima at!

Messages

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Blanditiis magni aperiam animi necessitatibus cumque officia voluptatum libero optio tempora dolores! Dolores, inventore, numquam nihil atque optio maiores tempore! Inventore, minima.

Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, dolor, rerum, non culpa itaque natus nulla perspiciatis dolore libero quam qui molestias amet accusamus. Consectetur, nesciunt quam natus atque odit.

Scrolling Tabs

If you don't want the tabs to wrap if the page is too narrow, you can call the scrollingTabs() funtion to keep them in a row that scrolls horizontally without a scrollbar.

Its responsive, so if the window is widened enough to accommodate all tabs, scrolling will deactivate and the scroll arrows will disappear.

Resize your browser window to see the responsive effect.

Scrolling Tabs Example

Tab 1

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Tab 2

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Tab 3

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Tab 4

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Tab 5

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Tab 6

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Tab 7

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Tab 8

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Full Width Tabs

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Messages

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Bottom Tabs

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Messages

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Vertical Tabs

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Messages

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Home

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Profile

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Messages

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

Settings

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio, consequatur, mollitia, sint adipisci corporis praesentium quo incidunt laboriosam quam repudiandae necessitatibus quae deleniti numquam tenetur similique saepe est soluta provident.

© 2016 YourApp