→ 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

383

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

Agriculture Website for Live project_WDD

Author:
Anonymous

4 months ago

505

v.4.6
E-Commerce Contact Section

Author:
Creative Araf

3 months ago

319

v.5.3
Personal Portfolio About Section

Author:
Creative Araf

3 months ago

433

v.5.3
Parsonal PortFolio Full WebSite

Author:
Zahid Hasan Riyad

2 months ago

520

v.5.3
NewsPortal Full Website

Author:
Zahid Hasan Riyad

2 months ago

698

v.5.3
E-com Home Page

Author:
Creative Araf

2 months ago

148

v.5.3
navbar white simple #1

Author:
java stories story

1 year ago

4k

v.5.3
Sticky Table Headings Example

Author:
Anonymous

1 year ago

4.2k

v.5.3
contact

Author:
lamiajahan

2 months ago

193

v.4.6
PlantStore full website

Author:
Zahid Hasan Riyad

2 months ago

457

v.5.3
hero parallax

Author:
java stories story

1 year ago

4.9k

v.5.3
E-Commerce Full

Author:
Zahid Hasan Riyad

2 months ago

685

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent