<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>

</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">...</div>

  <div class="tab-pane fade" id="pills-profile" role="tabpanel" aria-labelledby="pills-profile-tab">...</div>

  <div class="tab-pane fade" id="pills-contact" role="tabpanel" aria-labelledby="pills-contact-tab">...</div>

</div>

​

<!-- RH: this is bootstrap 5 tabbed panel -->

<ul class="nav nav-tabs" id="myTab" role="tablist">

  <li class="nav-item" role="presentation">

    <a class="nav-link active" id="home-tab" data-bs-toggle="tab" href="#home" role="tab" aria-controls="home" aria-selected="true">Home</a>

  </li>

  <li class="nav-item" role="presentation">

    <a class="nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile" role="tab" aria-controls="profile" aria-selected="false">Profile</a>

  </li>

  <li class="nav-item" role="presentation">

    <a class="nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact" role="tab" aria-controls="contact" aria-selected="false">Contact</a>

  </li>

</ul>

<div class="tab-content" id="myTabContent">

  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>

  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>

  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>

</div>

​

<nav>

  <div class="nav nav-tabs" id="nav-tab" role="tablist">

    <button class="nav-link active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button>

    <button class="nav-link" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button>

    <button class="nav-link" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button>

  </div>

</nav>

<div class="tab-content" id="nav-tabContent">

  <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">...</div>

  <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">...</div>

  <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">...</div>

</div>

​

<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" type="button" role="tab" aria-controls="home" 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" type="button" role="tab" aria-controls="profile" 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" type="button" role="tab" aria-controls="contact" aria-selected="false">Contact</button>

  </li>

</ul>

<div class="tab-content" id="myTabContent">

  <div class="tab-pane fade show active" id="home" role="tabpanel" aria-labelledby="home-tab">...</div>

  <div class="tab-pane fade" id="profile" role="tabpanel" aria-labelledby="profile-tab">...</div>

  <div class="tab-pane fade" id="contact" role="tabpanel" aria-labelledby="contact-tab">...</div>

</div>

​

<!--aks bootstrap-tab-v-5 -->

    <div class="tab-content" id="nav-tabContent">

      <div class="tab-pane fade show active" id="nav-home" role="tabpanel" aria-labelledby="nav-home-tab">..1.</div>

      <div class="tab-pane fade" id="nav-profile" role="tabpanel" aria-labelledby="nav-profile-tab">..2.</div>

      <div class="tab-pane fade" id="nav-contact" role="tabpanel" aria-labelledby="nav-contact-tab">.3..</div>

    </div>

​

​

      <div class="nav nav-tabs" id="nav-tab" role="tablist" style="border: none;">

         <a class="nav-link1 active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true" href="javascript:;">Home</a>

         <a class="nav-link1" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false" href="javascript:;">Profile</a>

         <a class="nav-link1" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false" href="javascript:;">Contact</a>

        <!-- <button class="nav-link1 active" id="nav-home-tab" data-bs-toggle="tab" data-bs-target="#nav-home" type="button" role="tab" aria-controls="nav-home" aria-selected="true">Home</button> -->

        <!-- <button class="nav-link1" id="nav-profile-tab" data-bs-toggle="tab" data-bs-target="#nav-profile" type="button" role="tab" aria-controls="nav-profile" aria-selected="false">Profile</button> -->

        <!-- <button class="nav-link1" id="nav-contact-tab" data-bs-toggle="tab" data-bs-target="#nav-contact" type="button" role="tab" aria-controls="nav-contact" aria-selected="false">Contact</button> -->

      </div>

​

​

​

​

    <!-- customize bootstrap-tab-v-5 -->

        <div class="tab-content" id="nav-tabContent">

            <div class="tab-pane fade show active" id="nav-1" role="tabpanel">..1.</div>

            <div class="tab-pane fade" id="nav-2" role="tabpanel">..2.</div>

            <div class="tab-pane fade" id="nav-3" role="tabpanel">.3..</div>

        </div>

​

​

        <div class="nav nav-tabs" id="nav-tab" role="tablist" style="border: none;">

            <a class="active" data-bs-toggle="tab" data-bs-target="#nav-1" type="button" role="tab" aria-controls="nav-1" aria-selected="true" href="javascript:;">Home</a>

            <a class="" data-bs-toggle="tab" data-bs-target="#nav-2" type="button" role="tab" aria-controls="nav-2" aria-selected="false" href="javascript:;">Profile</a>

            <a class="" data-bs-toggle="tab" data-bs-target="#nav-3" type="button" role="tab" aria-controls="nav-3" aria-selected="false" href="javascript:;">Contact</a>

        </div>

​

<!-- Bootstrap 5 Nav tabs -->

<ul class="nav nav-pills nav-fill">

   <li class="nav-item">

      <a class="nav-link active" aria-current="page" href="#">Active</a>

   </li>

   <li class="nav-item">

      <a class="nav-link" href="#">Much longer nav link</a>

   </li>

   <li class="nav-item">

      <a class="nav-link" href="#">Link</a>

   </li>

   <li class="nav-item">

      <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true"

         >Disabled</a

      >

   </li>

</ul>

<div class="container">

  <h3>Default Bootstrap 3 Pills Example</h3>

  <!-- `nav-pills` class attribute of a `ul` HTML element below --> 

  <ul class="nav nav-pills">   

    <li class="active"><a href="http://www.tutorialmines.net">Home</a></li>

    <li><a href="http://www.tutorialmines.net/bootstrap-3-tutorial/">Bootstrap 3</a></li>

    <li><a href="http://www.tutorialmines.net/php-5-string-functions/">PHP 5</a></li>

    <li><a href="http://www.tutorialmines.net/responsive-web-design-tutorial/">RWD</a></li>

  </ul>

</div>

bootstrap tabs