Navs & Tabs

Horizontal

<ul class="nav">
                            <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="#">Link</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                            </li>
                            </ul>
<ul class="nav flex-column">
                            <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="#">Link</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                            </li>
                            </ul>
<ul class="nav nav-pills">
                            <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="#">Link</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                            </li>
                            </ul>

Underlines

<ul class="nav nav-underline">
                            <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="#">Link</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link" href="#">Link</a>
                            </li>
                            <li class="nav-item">
                            <a class="nav-link disabled" aria-disabled="true">Disabled</a>
                            </li>
                            </ul>

Fill and Justify

<ul class="nav nav-pills nav-fill mb-4">
                            <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">Disabled</a></li>
                            </ul>
                            <ul class="nav nav-pills nav-justified">
                            <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">Disabled</a></li>
                            </ul>

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto id qui veniam nemo laborum voluptas doloremque aperiam quae obcaecati dolor.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto id qui veniam nemo laborum voluptas doloremque aperiam quae obcaecati dolor.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto id qui veniam nemo laborum voluptas doloremque aperiam quae obcaecati dolor.

Lorem ipsum, dolor sit amet consectetur adipisicing elit. Architecto id qui veniam nemo laborum voluptas doloremque aperiam quae obcaecati dolor.

<ul class="nav nav-lb-tab mb-3" 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">
                            <p>Lorem ipsum, dolor sit amet consectetur
                            adipisicing elit. Architecto id qui veniam nemo laborum voluptas doloremque aperiam quae
                            obcaecati dolor.</p>
                            </div>
                            <div class="tab-pane fade" id="profile-tab-pane" role="tabpanel" aria-labelledby="profile-tab" tabindex="0">
                            <p>Lorem ipsum, dolor sit amet consectetur
                            adipisicing elit. Architecto id qui veniam nemo laborum voluptas doloremque aperiam quae
                            obcaecati dolor.</p>
                            </div>
                            <div class="tab-pane fade" id="contact-tab-pane" role="tabpanel" aria-labelledby="contact-tab" tabindex="0">
                            <p>Lorem ipsum, dolor sit amet consectetur
                            adipisicing elit. Architecto id qui veniam nemo laborum voluptas doloremque aperiam quae
                            obcaecati dolor.</p>
                            </div>
                            <div class="tab-pane fade" id="disabled-tab-pane" role="tabpanel" aria-labelledby="disabled-tab" tabindex="0">
                            <p>Lorem ipsum, dolor sit amet consectetur
                            adipisicing elit. Architecto id qui veniam nemo laborum voluptas doloremque aperiam quae
                            obcaecati dolor.</p>
                            </div>
                            </div>
Buy Now