Navs & Tabs

<!-- Navigation -->
<ul class="nav justify-content-center">
    <li class="nav-item">
        <a class="nav-link active" href="javascript:void(0)">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
    </li>
</ul>
<!-- /navigation -->

<!-- Navigation -->
<ul class="nav justify-content-end">
    <li class="nav-item">
        <a class="nav-link active" href="javascript:void(0)">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
    </li>
</ul>
<!-- /navigation -->

<!-- Navigation -->
<ul class="nav flex-column">
    <li class="nav-item">
        <a class="nav-link active" href="javascript:void(0)">Active</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link" href="javascript:void(0)">Link</a>
    </li>
    <li class="nav-item">
        <a class="nav-link disabled" href="javascript:void(0)">Disabled</a>
    </li>
</ul>
<!-- /navigation -->

<!-- Tab Container -->
<div class="tabs-container">

    <!-- Tab Navigation -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="true">Profile</a>
        </li>
    </ul>
    <!-- /tab navigation -->

    <!-- Tab Content -->
    <div class="tab-content">

        <!-- Tab Pane -->
        <div id="home" class="tab-pane active">
            <div class="card-body">
                <p class="card-text">
                    <strong>A wonderful serenity has taken possession</strong> of my
                    entire soul,
                    like these sweet mornings of spring which I enjoy with my whole
                    heart. I am alone, and feel the charm of existence in this spot,
                    which was created for the bliss of souls like mine.
                </p>
                <p class="card-text">
                    I am so happy, my dear friend, so absorbed in the exquisite
                    sense of mere tranquil existence, that I neglect my talents. I
                    should be incapable of drawing a single stroke at the present
                    moment; and yet I feel that I never was a greater artist than
                    now.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

        <!-- Tab Pane -->
        <div id="profile" class="tab-pane">
            <div class="card-body">
                <p class="card-text">
                    <strong>Thousand unknown plants are noticed by me:</strong> when I
                    hear the buzz
                    of the little world among the stalks, and grow familiar with the
                    countless indescribable forms of the insects and flies, then I
                    feel the presence of the Almighty, who formed us in his.
                </p>
                <p class="card-text">I am alone, and feel the charm of existence in this
                    spot, which
                    was created for the bliss of souls like mine. I am so happy, my
                    dear friend, so absorbed in the exquisite sense of mere tranquil
                    existence, that I neglect my talents. I should be incapable of
                    drawing.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

    </div>
    <!-- /tab content -->

</div>
<!-- /tab container -->

<!-- Tab Container -->
<div class="tabs-container">

    <!-- Tab Navigation -->
    <ul class="nav nav-tabs" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#tab-pane-1" role="tab" aria-controls="tab-pane-1" aria-selected="true"><i class="icon icon-desktop icon-xl"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-pane-2" role="tab" aria-controls="tab-pane-2" aria-selected="true"><i class="icon icon-dashboard icon-xl"></i>
            </a>
        </li>
    </ul>
    <!-- /tab navigation -->

    <!-- Tab Content -->
    <div class="tab-content">

        <!-- Tab Pane -->
        <div id="tab-pane-1" class="tab-pane active">
            <div class="card-body">
                <p class="card-text">
                    <strong>A wonderful serenity has taken possession</strong> of my
                    entire soul,
                    like these sweet mornings of spring which I enjoy with my whole
                    heart. I am alone, and feel the charm of existence in this spot,
                    which was created for the bliss of souls like mine.
                </p>
                <p class="card-text">I am so happy, my dear friend, so absorbed in the
                    exquisite
                    sense of mere tranquil existence, that I neglect my talents. I
                    should be incapable of drawing a single stroke at the present
                    moment; and yet I feel that I never was a greater artist than
                    now.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

        <!-- Tab Pane -->
        <div id="tab-pane-2" class="tab-pane">
            <div class="card-body">
                <p class="card-text">
                    <strong>Thousand unknown plants are noticed by me:</strong> when I
                    hear the buzz
                    of the little world among the stalks, and grow familiar with the
                    countless indescribable forms of the insects and flies, then I
                    feel the presence of the Almighty, who formed us in his.
                </p>
                <p class="card-text">I am alone, and feel the charm of existence in this
                    spot, which
                    was created for the bliss of souls like mine. I am so happy, my
                    dear friend, so absorbed in the exquisite sense of mere tranquil
                    existence, that I neglect my talents. I should be incapable of
                    drawing.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

    </div>
    <!-- /tab content -->

</div>
<!-- /tab container -->

<!-- Tab Container -->
<div class="tabs-container tabs-vertical">

    <!-- Tab Navigation -->
    <ul class="nav nav-tabs flex-column" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#tab-pane-3" role="tab" aria-controls="tab-pane-3" aria-selected="true">Home
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-pane-4" role="tab" aria-controls="tab-pane-4" aria-selected="true">Profile
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-pane-5" role="tab" aria-controls="tab-pane-5" aria-selected="true">Messages
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-pane-6" role="tab" aria-controls="tab-pane-6" aria-selected="true">Settings
            </a>
        </li>
    </ul>
    <!-- /tab navigation -->

    <!-- Tab Content -->
    <div class="tab-content">

        <!-- Tab Pane -->
        <div id="tab-pane-3" class="tab-pane active">
            <div class="card-body">
                <p class="card-text">
                    <strong>A wonderful serenity has taken possession</strong> of my
                    entire soul,
                    like these sweet mornings of spring which I enjoy with my whole
                    heart. I am alone, and feel the charm of existence in this spot,
                    which was created for the bliss of souls like mine.
                </p>
                <p class="card-text">
                    I am so happy, my dear friend, so absorbed in the exquisite
                    sense of mere tranquil existence, that I neglect my talents. I
                    should be incapable of drawing a single stroke at the present
                    moment; and yet I feel that I never was a greater artist than
                    now.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

        <!-- Tab Pane -->
        <div id="tab-pane-4" class="tab-pane">
            <div class="card-body">
                <p class="card-text">
                    <strong>Thousand unknown plants are noticed by me:</strong> when I
                    hear the buzz
                    of the little world among the stalks, and grow familiar with the
                    countless indescribable forms of the insects and flies, then I
                    feel the presence of the Almighty, who formed us in his.
                </p>
                <p class="card-text">I am alone, and feel the charm of existence in this
                    spot, which
                    was created for the bliss of souls like mine. I am so happy, my
                    dear friend, so absorbed in the exquisite sense of mere tranquil
                    existence, that I neglect my talents. I should be incapable of
                    drawing.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

        <!-- Tab Pane -->
        <div id="tab-pane-5" class="tab-pane">
            <div class="card-body">
                <p class="card-text">
                    <strong>A wonderful serenity has taken possession</strong> of my
                    entire soul,
                    like these sweet mornings of spring which I enjoy with my whole
                    heart. I am alone, and feel the charm of existence in this spot,
                    which was created for the bliss of souls like mine.
                </p>
                <p class="card-text">
                    I am so happy, my dear friend, so absorbed in the exquisite
                    sense of mere tranquil existence, that I neglect my talents. I
                    should be incapable of drawing a single stroke at the present
                    moment; and yet I feel that I never was a greater artist than
                    now.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

        <!-- Tab Pane -->
        <div id="tab-pane-6" class="tab-pane">
            <div class="card-body">
                <p class="card-text">
                    <strong>Thousand unknown plants are noticed by me:</strong> when I
                    hear the buzz
                    of the little world among the stalks, and grow familiar with the
                    countless indescribable forms of the insects and flies, then I
                    feel the presence of the Almighty, who formed us in his.
                </p>
                <p class="card-text">I am alone, and feel the charm of existence in this
                    spot, which
                    was created for the bliss of souls like mine. I am so happy, my
                    dear friend, so absorbed in the exquisite sense of mere tranquil
                    existence, that I neglect my talents. I should be incapable of
                    drawing.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

    </div>
    <!-- /tab content -->

</div>
<!-- /tab container -->

<!-- Tab Container -->
<div class="tabs-container tabs-vertical tabs-right">

    <!-- Tab Navigation -->
    <ul class="nav nav-tabs flex-column" role="tablist">
        <li class="nav-item">
            <a class="nav-link active" data-toggle="tab" href="#tab-pane-7" role="tab" aria-controls="tab-pane-7" aria-selected="true"><i class="icon icon-desktop icon-xl"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-pane-8" role="tab" aria-controls="tab-pane-8" aria-selected="true"><i class="icon icon-dashboard icon-xl"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-pane-9" role="tab" aria-controls="tab-pane-9" aria-selected="true"><i class="icon icon-mail icon-xl"></i>
            </a>
        </li>
        <li class="nav-item">
            <a class="nav-link" data-toggle="tab" href="#tab-pane-10" role="tab" aria-controls="tab-pane-10" aria-selected="true"><i class="icon icon-settings icon-xl"></i>
            </a>
        </li>
    </ul>
    <!-- /tab navigation -->

    <!-- Tab Content -->
    <div class="tab-content">

        <!-- Tab Pane -->
        <div id="tab-pane-7" class="tab-pane active">
            <div class="card-body">
                <p class="card-text">
                    <strong>A wonderful serenity has taken possession</strong> of my
                    entire soul,
                    like these sweet mornings of spring which I enjoy with my whole
                    heart. I am alone, and feel the charm of existence in this spot,
                    which was created for the bliss of souls like mine.
                </p>
                <p class="card-text">I am so happy, my dear friend, so absorbed in the
                    exquisite
                    sense of mere tranquil existence, that I neglect my talents. I
                    should be incapable of drawing a single stroke at the present
                    moment; and yet I feel that I never was a greater artist than
                    now.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

        <!-- Tab Pane -->
        <div id="tab-pane-8" class="tab-pane">
            <div class="card-body">
                <p class="card-text">
                    <strong>Thousand unknown plants are noticed by me:</strong> when I
                    hear the buzz
                    of the little world among the stalks, and grow familiar with the
                    countless indescribable forms of the insects and flies, then I
                    feel the presence of the Almighty, who formed us in his.
                </p>
                <p class="card-text">I am alone, and feel the charm of existence in this
                    spot, which
                    was created for the bliss of souls like mine. I am so happy, my
                    dear friend, so absorbed in the exquisite sense of mere tranquil
                    existence, that I neglect my talents. I should be incapable of
                    drawing.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

        <!-- Tab Pane -->
        <div id="tab-pane-9" class="tab-pane">
            <div class="card-body">
                <p class="card-text">
                    <strong>A wonderful serenity has taken possession</strong> of my
                    entire soul,
                    like these sweet mornings of spring which I enjoy with my whole
                    heart. I am alone, and feel the charm of existence in this spot,
                    which was created for the bliss of souls like mine.
                </p>
                <p class="card-text">
                    I am so happy, my dear friend, so absorbed in the exquisite
                    sense of mere tranquil existence, that I neglect my talents. I
                    should be incapable of drawing a single stroke at the present
                    moment; and yet I feel that I never was a greater artist than
                    now.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

        <!-- Tab Pane -->
        <div id="tab-pane-10" class="tab-pane">
            <div class="card-body">
                <p class="card-text">
                    <strong>Thousand unknown plants are noticed by me:</strong> when I
                    hear the buzz
                    of the little world among the stalks, and grow familiar with the
                    countless indescribable forms of the insects and flies, then I
                    feel the presence of the Almighty, who formed us in his.
                </p>
                <p class="card-text">I am alone, and feel the charm of existence in this
                    spot, which
                    was created for the bliss of souls like mine. I am so happy, my
                    dear friend, so absorbed in the exquisite sense of mere tranquil
                    existence, that I neglect my talents. I should be incapable of
                    drawing.
                </p>
            </div>
        </div>
        <!-- /tab pane-->

    </div>
    <!-- /tab content -->

</div>
<!-- /tab container -->

<!-- Tab Container -->
<div class="tabs-container">

    <!-- Card -->
    <div class="card">

        <!-- Card Header -->
        <div class="card-header">
            <!-- Tab Navigation -->
            <ul class="card-header-pills nav nav-pills" role="tablist">
                <li class="nav-item">
                    <a class="nav-link active show" data-toggle="tab" href="#tab-pane-11" role="tab" aria-controls="tab-pane-11" aria-selected="true">Active</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link" data-toggle="tab" href="#tab-pane-12" role="tab" aria-controls="tab-pane-12" aria-selected="false">link</a>
                </li>
                <li class="nav-item"><a class="nav-link disabled">Disabled</a>
                </li>
            </ul>
            <!-- /tab navigation -->
        </div>
        <!-- /card header -->

        <!-- Tab Content -->
        <div class="tab-content">

            <!-- Tab Pane -->
            <div id="tab-pane-11" class="tab-pane active show">
                <div class="card-body">
                    <h3 class="card-title">Card Title</h3>
                    <h6 class="card-subtitle">Sub-heading text</h6>
                    <p class="card-text">
                        Lorem Ipsum is simply dummy text of the printing and
                        typesetting industry. Lorem Ipsum has been the industry's
                        standard
                        dummy
                        text ever since the 1500s, when an unknown printer took a galley
                        of
                        type
                        and scrambled it to make a type specimen book.
                    </p>
                    <p class="card-text">
                        It has survived not only five centuries, but also the
                        leap into electronic typesetting, remaining essentially
                        unchanged.
                        It
                        was popularised in the 1960s with the release of Letraset sheets
                        containing Lorem Ipsum passages, and more recently with desktop
                        publishing software like Aldus PageMaker including versions of
                        Lorem
                        Ipsum.
                    </p>
                </div>
            </div>
            <!-- /tab pane-->

            <!-- Tab Pane -->
            <div id="tab-pane-12" class="tab-pane">
                <div class="card-body">
                    <h3 class="card-title">Card Title</h3>
                    <h6 class="card-subtitle">Sub-heading text</h6>
                    <p class="card-text">
                        <strong>Thousand unknown plants are noticed by me:</strong> when
                        I
                        hear
                        the buzz
                        of the little world among the stalks, and grow familiar with the
                        countless indescribable forms of the insects and flies, then I
                        feel the presence of the Almighty, who formed us in his.
                    </p>
                    <p class="card-text">I am alone, and feel the charm of existence in
                        this
                        spot, which
                        was created for the bliss of souls like mine. I am so happy, my
                        dear friend, so absorbed in the exquisite sense of mere tranquil
                        existence, that I neglect my talents. I should be incapable of
                        drawing.
                    </p>
                </div>
            </div>
            <!-- /tab pane-->

            <!-- Tab Pane -->
            <div class="tab-pane">
                <div class="card-body">
                    <h3 class="card-title">Card Title Disabled</h3>
                    <h6 class="card-subtitle">Sub-heading text Disabled</h6>
                    <p class="card-text">
                        Small plates, salads &amp; sandwiches in an intimate
                        setting with 12 indoor seats plus patio seating</p>
                    <p class="card-text">
                        Donec imperdiet enim et dignissim interdum.
                        Pellentesque in ortti tor elit. Curabitur consectetur.
                    </p>
                </div>
            </div>
            <!-- /tab pane-->

        </div>
        <!-- /tab content -->

    </div>
    <!-- /card -->

</div>
<!-- /tab container -->