→ sharp.jkm
→ test nav tabs

test nav tabs

This bootstrap css example is contributed by sharp.jkm, on 10-Aug-2026. Component is made with bootstrap css v.5.3. It is responsive.

Tags: Header

Author sharp.jkm

460

v.5.3

Fork Fullscreen

<ul class="nav nav-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">
          <div class="p-3">
            <p>This is content on the home tab.</p>
          </div>  
        </div>
        <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
          <div class="p-3">
            <p>This is content on the profile tab.</p>
          </div> 
        </div>
        <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
          <div class="p-3">
              <p>This is content on the contact tab.</p>
          </div> 
        </div>
        <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
          <div class="p-3">
              <p>This is content on the disabled tab.</p>
          </div> 
        </div>
      </div>

<p>Navigation using anchor elements to link to other pages</p>
    <ul class="nav nav-tabs" id="myTab2">
        <li class="nav-item">
          <a class="nav-link active" id="home-tab2" href="home.html">Home</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="profile-tab2" href="profile.html">Profile</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" id="contact-tab2" href="contact.html">Contact</a>
        </li>
        <li class="nav-item">
          <a class="nav-link disabled" id="disabled-tab2" aria-disabled="true" tabindex="-1">Disabled</a>
        </li>
      </ul>

More Examples

Portfolio Full Website

Author:
Zahid Hasan Riyad

3 months ago

620

v.5.3
head section
do not copy please

Author:
Fitar Ahmed

5 months ago

892

v.4.6
Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

1 year ago

2.7k

v.4.6
Marquee

Author:
Zahid Hasan Riyad

3 months ago

512

v.5.3
Header and Footer Section

Author:
Shahriar Noyon

5 months ago

735

v.4.6
E-Commerce Product Page

Author:
Creative Araf

4 months ago

445

v.5.3
contact

Author:
lamiajahan

3 months ago

248

v.4.6
Restaurant Home Page

Author:
Creative Araf

3 months ago

256

v.5.3
Responsive Bootstrap Navbar with Mobile Toggle and Remix Icons
This responsive Bootstrap 5 navbar features a clean and modern design, enhanced with Remix Icons for login and cart functionality. It includes a desktop navigation layout with a logo, links, search bar, and action buttons, while the mobile version adapts seamlessly with a toggle menu. Ideal for e-commerce or multipage websites seeking a sleek and user-friendly header layout.

Author:
Anonymous

1 year ago

5.7k

v.5.3
NewsPortal Full Website

Author:
Zahid Hasan Riyad

3 months ago

828

v.5.3
HTML, CSS, and JavaScript for Multi-layer Dropdown Header
HTML: Added dropdown-submenu class to handle nested dropdowns. CSS: Dropdown Submenu: Positioned to the right of the parent dropdown. JavaScript: Event Listeners: Added to show and hide nested dropdowns on mouse enter and leave. How to Use: Create an header.html file and paste the updated code into it. Include Bootstrap and Font Awesome if needed for styling and icons.

Author:
zobaidul kaziex

2 years ago

4k

v.4.6
My site Exm code

Author:
Zahid Hasan Riyad

3 months ago

415

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent