Bootstrap

Bootstrap Navbar

by Saadinfo

✅ Basic Bootstrap Navbar Example

html

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>Bootstrap Navbar</title>

  <meta name="viewport" content="width=device-width, initial-scale=1">

  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">

</head>

<body>
<!-- Navbar -->

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">

  <div class="container-fluid">

    <a class="navbar-brand" href="#">MyBlog</a>

    <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarContent"

      aria-controls="navbarContent" aria-expanded="false" aria-label="Toggle navigation">

      <span class="navbar-toggler-icon"></span>

    </button>
    <!-- Navbar links -->

    <div class="collapse navbar-collapse" id="navbarContent">

      <ul class="navbar-nav me-auto mb-2 mb-lg-0">

        <li class="nav-item">

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

        </li>

        <li class="nav-item">

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

        </li>

        <li class="nav-item">

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

        </li>

        <li class="nav-item">

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

        </li>

      </ul>
      <!-- Optional: Search or profile/login -->

      <form class="d-flex" role="search">

        <input class="form-control me-2" type="search" placeholder="Search posts" aria-label="Search">

        <button class="btn btn-outline-light" type="submit">Search</button>

      </form>

    </div>

  </div>

</nav>

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

Notes:

navbar-expand-lg: Expands the navbar on large screens, collapses on smaller ones.
navbar-dark bg-dark: Dark theme. Change to navbar-light bg-light for light theme.
The hamburger menu shows on mobile and expands/collapses the nav items.

Want Add-ons?

Let me know if you’d like:

Dropdown menus
Login/Register buttons
Sticky or fixed-top nav
Scroll spy (active section highlighting)

Would you like me to integrate this navbar with your tabbed blog layout too?

Leave a Reply Cancel reply