Tabs

Tabs make it easy to explore and switch between different views or functional aspects of an app or to browse categorised data sets.

Material uses Bootstrap's tab, please visit Bootstrap's documentation site for detailed usage.

Bootstrap Tabopen_in_new

Basic Tabs

Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.

Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Aenean lacinia bibendum nulla sed consectetur. Praesent commodo cursus magna, vel scelerisque nisl consectetur et. Donec sed odio dui. Donec ullamcorper nulla non metus auctor fringilla.

<nav class="tab-nav">
    <ul class="nav">
        <li class="active">
            <a data-toggle="tab" href="#selector"> ... </a>
        </li>
        ...
    </ul>
</nav>

Coloured Tabs

.tab-nav-brand

Another Tab.

Third Tab.

.tab-nav-green

Another Tab.

Third Tab.

.tab-nav-orange

Another Tab.

Third Tab.

.tab-nav-red

Another Tab.

Third Tab.