→ 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

135

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

E- Commarce full website

Author:
Zahid Hasan Riyad

4 weeks ago

174

v.5.3
Portfolio Full Website

Author:
Zahid Hasan Riyad

1 month ago

211

v.5.3
Personal Portfolio About Section

Author:
Creative Araf

1 month ago

288

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

Author:
Fitar Ahmed

3 months ago

297

v.4.6
service

Author:
lamiajahan

1 month ago

119

v.4.6
navabar

Author:
MR Chowdhury Gaming

1 month ago

220

v.4.6
head section
do not copy please

Author:
Fitar Ahmed

3 months ago

788

v.4.6
Marquee

Author:
Zahid Hasan Riyad

1 month ago

158

v.5.3
Hidden Search Widget
Hidden Search Widget

Author:
Rami AlAjo

1 year ago

1.9k

v.4.6
Agriculture Website for Live project_WDD

Author:
Anonymous

2 months ago

390

v.4.6
E-com Login Page

Author:
Creative Araf

1 month ago

89

v.5.3
E-Commerce Cart Section

Author:
Creative Araf

1 month ago

210

v.5.3

Didn't find component you were looking for?

Search from 300+ componenent