Bootstrap

How to implement modern underline navbar tabs with Bootstrap 5.3?

March 18, 2026

download ready
Thank You
Your submission has been received.
We will be in touch and contact you soon!

Bootstrap 5.3 provides the .nav-underline utility to create modern underline-style navigation. When applied to a .navbar-nav or .nav container, it automatically displays an underline for the active .nav-link using the current theme color. Combined with responsive navbar utilities, it delivers a clean, contemporary tab-style navigation without custom CSS or JavaScript.

Example:-

Code


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">Brand</a>

        <button
          class="navbar-toggler"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav nav-underline w-100 justify-content-center">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>
Arrow icon

Previous

Next

Arrow icon
Hire Now!

Need Help with Bootstrap Development ?

Work with our skilled bootstrap developers to accelerate your project and boost its performance.
**Hire now**Hire Now**Hire Now**Hire now**Hire now

Related Q&A

blog-banner-img
calender
March 18, 2026

How do CSS custom properties enhance theming and customization in Bootstrap 5?

Bootstrap
All
blog-banner-img
calender
March 18, 2026

How to fix common Bootstrap CSS issues like spinner distortion in flex containers?

Bootstrap
All
blog-banner-img
calender
March 18, 2026

Why does a Bootstrap modal stay hidden or behind other elements?

Bootstrap
All
Ready to Build
Something Amazing?
Got an Idea?
We got you.
Need a Tech Partner
You Can Trust?
Got Challenges?
We’ve Got Solutions.
Your Vision,
Our Mission.
Let’s talk.
Project Inquiry
Email iconhello@zignuts.com
Call icon+49 3056837888
Call icon+1 4088728242
Career Inquiry
Email icontalent@zignuts.com
Call icon+91 9427726620
India
A-409, Siddhraj Zori, Gandhinagar, 382421, Gujarat, India
Germany
Rheinsberger Str. 76,10115 Berlin, Germany
USA
611 Gateway Blvd, South San francisco, CA 94080, USA
Company Deck

Company Deck

PDF, 3MB

© 2026 Zignuts Technolab. All Rights Reserved.

Facebook iconTwitter iconInstagram iconYoutube iconLinkedIn iconSocial icon

How to implement modern underline navbar tabs with Bootstrap 5.3?

Bootstrap 5.3 provides the .nav-underline utility to create modern underline-style navigation. When applied to a .navbar-nav or .nav container, it automatically displays an underline for the active .nav-link using the current theme color. Combined with responsive navbar utilities, it delivers a clean, contemporary tab-style navigation without custom CSS or JavaScript.

Example:-

Code


<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
  </head>
  <body>
    <nav class="navbar navbar-expand-lg bg-light">
      <div class="container">
        <a class="navbar-brand" href="#">Brand</a>

        <button
          class="navbar-toggler"
          data-bs-toggle="collapse"
          data-bs-target="#navbarNav"
        >
          <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarNav">
          <ul class="navbar-nav nav-underline w-100 justify-content-center">
            <li class="nav-item">
              <a class="nav-link active" href="#">Home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">About</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Services</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="#">Contact</a>
            </li>
          </ul>
        </div>
      </div>
    </nav>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"></script>
  </body>
</html>