Investment AdminUIUX - Bootstrap HTML Admin template

Tabs

JS Tabs

Home

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet felis at eros scelerisque egestas eu et velit. Mauris venenatis vitae magna non vehicula. Ut porttitor consequat mauris, non varius nunc euismod quis. Mauris venenatis justo non lorem accumsan, at elementum neque egestas. Sed feugiat, ipsum et pretium mollis, metus erat aliquam ligula, eu congue massa felis eu neque. Nulla euismod molestie volutpat. Integer tempus, nisl non pharetra aliquam, ex massa vehicula velit, vel facilisis nibh turpis eu felis. Ut maximus at nisl at egestas. Curabitur et efficitur urna, vel vehicula elit. Nullam eget metus id nisl mattis blandit id sed risus. Praesent aliquam, eros venenatis egestas vehicula, risus eros vulputate lorem, et commodo nulla turpis a nibh.

Profile

Contact


            <ul class="nav nav-tabs adminuiux-tabs" id="myTab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="home-tab" data-bs-toggle="tab" data-bs-target="#home-tab-pane" type="button" role="tab" aria-controls="home-tab-pane" aria-selected="true">Home</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="profile-tab" data-bs-toggle="tab" data-bs-target="#profile-tab-pane" type="button" role="tab" aria-controls="profile-tab-pane" aria-selected="false">Profile</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="contact-tab" data-bs-toggle="tab" data-bs-target="#contact-tab-pane" type="button" role="tab" aria-controls="contact-tab-pane" aria-selected="false">Contact</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="disabled-tab" data-bs-toggle="tab" data-bs-target="#disabled-tab-pane" type="button" role="tab" aria-controls="disabled-tab-pane" aria-selected="false" disabled>Disabled</button>
                </li>
            </ul>
            <div class="tab-content" id="myTabContent">
                <div class="tab-pane fade show active" id="home-tab-pane" role="tabpanel" aria-labelledby="home-tab" tabindex="0">
                    <br>
                    <p class="h5">Home</p>
                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet felis at eros scelerisque egestas eu et velit. Mauris venenatis vitae magna non vehicula. Ut porttitor consequat mauris, non varius nunc euismod quis. Mauris venenatis justo non lorem accumsan, at elementum neque egestas. Sed feugiat, ipsum et pretium mollis, metus erat aliquam ligula, eu congue massa felis eu neque. Nulla euismod molestie volutpat. Integer tempus, nisl non pharetra aliquam, ex massa vehicula velit, vel facilisis nibh turpis eu felis. Ut maximus at nisl at egestas. Curabitur et efficitur urna, vel vehicula elit. Nullam eget metus id nisl mattis blandit id sed risus. Praesent aliquam, eros venenatis egestas vehicula, risus eros vulputate lorem, et commodo nulla turpis a nibh.</p>
                </div>
                <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                    <br>
                    <p class="h5">Profile</p>
                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet felis at eros scelerisque egestas eu et velit. Mauris venenatis vitae magna non vehicula. Ut porttitor consequat mauris, non varius nunc euismod quis. Mauris venenatis justo non lorem accumsan, at elementum neque egestas. Sed feugiat, ipsum et pretium mollis, metus erat aliquam ligula, eu congue massa felis eu neque. Nulla euismod molestie volutpat. Integer tempus, nisl non pharetra aliquam, ex massa vehicula velit, vel facilisis nibh turpis eu felis. Ut maximus at nisl at egestas. Curabitur et efficitur urna, vel vehicula elit. Nullam eget metus id nisl mattis blandit id sed risus. Praesent aliquam, eros venenatis egestas vehicula, risus eros vulputate lorem, et commodo nulla turpis a nibh.</p>
                </div>
                <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                    <br>
                    <p class="h5">Contact</p>
                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet felis at eros scelerisque egestas eu et velit. Mauris venenatis vitae magna non vehicula. Ut porttitor consequat mauris, non varius nunc euismod quis. Mauris venenatis justo non lorem accumsan, at elementum neque egestas. Sed feugiat, ipsum et pretium mollis, metus erat aliquam ligula, eu congue massa felis eu neque. Nulla euismod molestie volutpat. Integer tempus, nisl non pharetra aliquam, ex massa vehicula velit, vel facilisis nibh turpis eu felis. Ut maximus at nisl at egestas. Curabitur et efficitur urna, vel vehicula elit. Nullam eget metus id nisl mattis blandit id sed risus. Praesent aliquam, eros venenatis egestas vehicula, risus eros vulputate lorem, et commodo nulla turpis a nibh.</p>
                </div>
                <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
                </div>
            </div>

JS Tabs Pills

Home

Profile

Contact

...


            <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#pills-home" type="button" role="tab" aria-controls="pills-home" aria-selected="true">Home</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-profile-tab" data-bs-toggle="pill" data-bs-target="#pills-profile" type="button" role="tab" aria-controls="pills-profile" aria-selected="false">Profile</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-contact-tab" data-bs-toggle="pill" data-bs-target="#pills-contact" type="button" role="tab" aria-controls="pills-contact" aria-selected="false">Contact</button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-disabled-tab" data-bs-toggle="pill" data-bs-target="#pills-disabled" type="button" role="tab" aria-controls="pills-disabled" aria-selected="false" disabled>Disabled</button>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-home" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">
                    <p class="h5">Home</p>
                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet felis at eros scelerisque egestas eu et velit. Mauris venenatis vitae magna non vehicula. Ut porttitor consequat mauris, non varius nunc euismod quis. Mauris venenatis justo non lorem accumsan, at elementum neque egestas. Sed feugiat, ipsum et pretium mollis, metus erat aliquam ligula, eu congue massa felis eu neque. Nulla euismod molestie volutpat. Integer tempus, nisl non pharetra aliquam, ex massa vehicula velit, vel facilisis nibh turpis eu felis. Ut maximus at nisl at egestas. Curabitur et efficitur urna, vel vehicula elit. Nullam eget metus id nisl mattis blandit id sed risus. Praesent aliquam, eros venenatis egestas vehicula, risus eros vulputate lorem, et commodo nulla turpis a nibh.</p>
                </div>
                <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">
                    <p class="h5">Profile</p>
                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet felis at eros scelerisque egestas eu et velit. Mauris venenatis vitae magna non vehicula. Ut porttitor consequat mauris, non varius nunc euismod quis. Mauris venenatis justo non lorem accumsan, at elementum neque egestas. Sed feugiat, ipsum et pretium mollis, metus erat aliquam ligula, eu congue massa felis eu neque. Nulla euismod molestie volutpat. Integer tempus, nisl non pharetra aliquam, ex massa vehicula velit, vel facilisis nibh turpis eu felis. Ut maximus at nisl at egestas. Curabitur et efficitur urna, vel vehicula elit. Nullam eget metus id nisl mattis blandit id sed risus. Praesent aliquam, eros venenatis egestas vehicula, risus eros vulputate lorem, et commodo nulla turpis a nibh.</p>
                </div>
                <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">
                    <p class="h5">Contact</p>
                    <p class="text-secondary">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras sit amet felis at eros scelerisque egestas eu et velit. Mauris venenatis vitae magna non vehicula. Ut porttitor consequat mauris, non varius nunc euismod quis. Mauris venenatis justo non lorem accumsan, at elementum neque egestas. Sed feugiat, ipsum et pretium mollis, metus erat aliquam ligula, eu congue massa felis eu neque. Nulla euismod molestie volutpat. Integer tempus, nisl non pharetra aliquam, ex massa vehicula velit, vel facilisis nibh turpis eu felis. Ut maximus at nisl at egestas. Curabitur et efficitur urna, vel vehicula elit. Nullam eget metus id nisl mattis blandit id sed risus. Praesent aliquam, eros venenatis egestas vehicula, risus eros vulputate lorem, et commodo nulla turpis a nibh.</p>
                </div>
                <div class="tab-pane fade" id="pills-disabled" role="tabpanel" aria-labelledby="pills-disabled-tab" tabindex="0">...</div>
            </div>

Navs

Breadcrumb