→ 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

230

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

about section bootstrap
about section rro

Author:
RAHAT RAHMAN OFICIAL

4 months ago

363

v.4.6
E-com Product Detail Page

Author:
Creative Araf

2 months ago

113

v.5.3
Restaurent Login Page

Author:
Creative Araf

2 months ago

95

v.5.3
main html and js section keep nav and footer
do not copy

Author:
Fitar Ahmed

4 months ago

335

v.4.6
E-Commarce

Author:
Anonymous

1 month ago

308

v.5.3
Rotating Navigation Animation
Rotating Navigation Animation

Author:
Rami AlAjo

1 year ago

2.6k

v.4.6
cllient review
do not copy

Author:
Fitar Ahmed

4 months ago

818

v.4.6
navbar gradient #1

Author:
java stories story

1 year ago

3.3k

v.5.3
menu with links
dont copy

Author:
Fitar Ahmed

4 months ago

790

v.4.6
HTML Boilerplate

Author:
istiakahmedchowdhury10

2 months ago

124

v.4.6
Navbar Scrollspy

Author:
java stories story

1 year ago

2.4k

v.5.3
Portfolio Full Website

Author:
Zahid Hasan Riyad

1 month ago

322

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent