Material Admin Extended Dark

## Tabs

Add quick, dynamic tab functionality to transition through panes of local content, even via dropdown menus.

This is a Bootstrap's Javascript component. You can check the official documentation at: http://getbootstrap.com/javascript/#tabs

Live preview: `/components.html`

#### Basic example

    <div class="tab">
        <ul class="tab-nav">
            <li class="active"><a href="#tab-home" data-toggle="tab">Home</a></li>
            <li><a href="#tab-profile" data-toggle="tab">Profile</a></li>
            <li><a href="#tab-message" data-toggle="tab">Messages</a></li>
            <li><a href="#tab-setting" data-toggle="tab">Settings</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="tab-home">...</div>
            <div class="tab-pane" id="tab-profile">...</div>
            <div class="tab-pane" id="tab-message">...</div>
            <div class="tab-pane" id="tab-setting">...</div>
        </div>
    </div>

#### Justified Tabs

    <div class="tab">
        <ul class="tab-nav tab-nav--justified">
            <li class="active"><a href="#tab-home" data-toggle="tab">Home</a></li>
            <li><a href="#tab-profile" data-toggle="tab">Profile</a></li>
            <li><a href="#tab-message" data-toggle="tab">Messages</a></li>
            <li><a href="#tab-setting" data-toggle="tab">Settings</a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="tab-home">...</div>
            <div class="tab-pane" id="tab-profile">...</div>
            <div class="tab-pane" id="tab-message">...</div>
            <div class="tab-pane" id="tab-setting">...</div>
        </div>
    </div>

#### Icon links (and justified)

    <div class="tab">
        <ul class="tab-nav tab-nav--justified tab-nav--icon">
            <li class="active"><a href="#tab-home" data-toggle="tab"><i class="zmdi zmdi-home"></i></a></li>
            <li><a href="#tab-profile" data-toggle="tab"><i class="zmdi zmdi-account"></i></a></li>
            <li><a href="#tab-message" data-toggle="tab"><i class="zmdi zmdi-email"></i></a></li>
            <li><a href="#tab-setting" data-toggle="tab"><i class="zmdi zmdi-settings"></i></a></li>
        </ul>

        <div class="tab-content">
            <div class="tab-pane active" id="tab-home">...</div>
            <div class="tab-pane" id="tab-profile">...</div>
            <div class="tab-pane" id="tab-message">...</div>
            <div class="tab-pane" id="tab-setting">...</div>
        </div>
    </div>

Source files:

- LESS: `/less/inc/bootstrao-overrides/tabs.less`
- HTML: `/components.html`