/* Use For Default Tabs */

                                                            <ul class="nav nav-tabs  tabs" role="tablist">
                                                                <li class="nav-item">
                                                                    <a class="nav-link active" data-toggle="tab" href="#home1" role="tab">Home<a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#profile1" role="tab">Profile</a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#messages1" role="tab">Messages</a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#settings1" role="tab">Settings</a>
                                                                </li>
                                                            </ul>

                                                            /* Tab panes */

                                                            <div class="tab-content tabs">
                                                                <div class="tab-pane active" id="home1" role="tabpanel">
                                                                    <p>1. This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                                                                    Aenean mas Cum sociis natoque penatibus et magnis dis.....</p>
                                                                </div>
                                                                <div class="tab-pane" id="profile1" role="tabpanel">
                                                                    <p>2.Cras consequat in enim ut efficitur. Nulla posuere elit quis auctor interdum praesent sit amet nulla vel enim amet. Donec convallis tellus neque, et imperdiet felis amet.</p>
                                                                </div>
                                                                <div class="tab-pane" id="messages1" role="tabpanel">
                                                                    <p>3. This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                                                                    Aenean mas Cum sociis natoque penatibus et magnis dis.....</p>
                                                                </div>
                                                                <div class="tab-pane" id="settings1" role="tabpanel">
                                                                    <p>4.Cras consequat in enim ut efficitur. Nulla posuere elit quis auctor interdum praesent sit amet nulla vel enim amet. Donec convallis tellus neque, et imperdiet felis amet.</p>
                                                                </div>
                                                            </div>

                                                        

                                                        /* Use For Below Tabs */

                                                            <div class="tab-content tabs">
                                                                <div class="tab-pane active" id="home2" role="tabpanel">
                                                                    <p>1. This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                                                                    Aenean mas Cum sociis natoque penatibus et magnis dis.....</p>
                                                                </div>
                                                                <div class="tab-pane" id="profile2" role="tabpanel">
                                                                    <p>2.Cras consequat in enim ut efficitur. Nulla posuere elit quis auctor interdum praesent sit amet nulla vel enim amet. Donec convallis tellus neque, et imperdiet felis amet.</p>
                                                                </div>
                                                                <div class="tab-pane" id="messages2" role="tabpanel">
                                                                    <p>3. This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                                                                        Aenean mas Cum sociis natoque penatibus et magnis dis.....</p>
                                                                </div>
                                                                <div class="tab-pane" id="settings2" role="tabpanel">
                                                                    <p>4.Cras consequat in enim ut efficitur. Nulla posuere elit quis auctor interdum praesent sit amet nulla vel enim amet. Donec convallis tellus neque, et imperdiet felis amet.</p>
                                                                </div>
                                                            </div>

                                                            <ul class="nav nav-tabs tab-below tabs" role="tablist">
                                                                <li class="nav-item">
                                                                    <a class="nav-link active" data-toggle="tab" href="#home2" role="tab">Home</a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#profile2" role="tab">Profile</a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#messages2" role="tab">Messages</a>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#settings2" role="tab">Settings</a>
                                                                </li>
                                                            </ul>
                                                        

                                                            /* Use For Left Material Tab */

                                                            <ul class="nav nav-tabs md-tabs tabs-left b-none" role="tablist">
                                                                <li class="nav-item">
                                                                    <a class="nav-link active" data-toggle="tab" href="#home5" role="tab">Home</a>
                                                                    <div class="slide"></div>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#profile5" role="tab">Profile</a>
                                                                    <div class="slide"><div>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#messages5" role="tab">Messages</a>
                                                                    <div class="slide"></div>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#settings5" role="tab">Settings</a>
                                                                    <div class="slide"></div>
                                                                </li>
                                                            </ul>

                                                            /* Tab panes */

                                                            <div class="tab-content tabs-left-content">
                                                                <div class="tab-pane active" id="home5" role="tabpanel">
                                                                    <p>1. This is Photoshop's version of Lorem IpThis is Photoshop's version of>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                                                                        Aenean mas Cum sociis natoque penatibus et magnis dis.....</p>
                                                                </div>
                                                                <div class="tab-pane" id="profile5" role="tabpanel">
                                                                    <p>2.Cras consequat in enim ut efficitur. Nulla posuere elit quis auctor>interdum praesent sit amet nulla vel enim amet. Donec convallis tellus neque, et imperdiet felis amet.</p>
                                                                </div>
                                                                <div class="tab-pane" id="messages5" role="tabpanel">
                                                                    <p>3. This is Photoshop's version of Lorem IpThis is Photoshop's version of>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                                                                        Aenean mas Cum sociis natoque penatibus et magnis dis.....</p>
                                                                </div>
                                                                <div class="tab-pane" id="settings5" role="tabpanel">
                                                                    <p>4.Cras consequat in enim ut efficitur. Nulla posuere elit quis auctor>interdum praesent sit amet nulla vel enim amet. Donec convallis tellus neque, et imperdiet felis amet.</p>
                                                                </div>
                                                            </div>

                                                        

                                                            /* Use For Right Material Tab */

                                                            <div class="tab-content tabs-right-content">
                                                                <div class="tab-pane active" id="home6" role="tabpanel">
                                                                    <p>1. This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                                                                        Aenean mas Cum sociis natoque penatibus et magnis dis.....</p>
                                                                </div>
                                                                <div class="tab-pane" id="profile6" role="tabpanel">
                                                                    <p>2.Cras consequat in enim ut efficitur. Nulla posuere elit quis auctor interdum praesent sit amet nulla vel enim amet. Donec convallis tellus neque, et imperdiet felis amet.</p>
                                                                </div>
                                                                <div class="tab-pane" id="messages6" role="tabpanel">
                                                                    <p>3. This is Photoshop's version of Lorem IpThis is Photoshop's version of Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor.
                                                                        Aenean mas Cum sociis natoque penatibus et magnis dis.....<p>
                                                                </div>
                                                                <div class="tab-pane" id="settings6" role="tabpanel">
                                                                    <p>4.Cras consequat in enim ut efficitur. Nulla posuere elit quis auctor interdum praesent sit amet nulla vel enim amet. Donec convallis tellus neque, et imperdiet felis amet.</p>
                                                                </div>
                                                            </div>

                                                          /* Nav tabs */

                                                            <ul class="nav nav-tabs md-tabs tabs-right b-none" role="tablist">
                                                                <li class="nav-item">
                                                                    <a class="nav-link active" data-toggle="tab" href="#home6" role="tab">Home</a>
                                                                    <div class="slide"></div>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#profile6" role="tab">Profile</a>
                                                                    <div class="slide"></div>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#messages6" role="tab">Messages</a>
                                                                    <div class="slide"></div>
                                                                </li>
                                                                <li class="nav-item">
                                                                    <a class="nav-link" data-toggle="tab" href="#settings6" role="tab">Settings</a>
                                                                    <div class="slide"></div>
                                                                </li>
                                                            </ul>