BootstrapHow-ToBeginner · 3 min read

How to Use Navbar Brand in Bootstrap: Simple Guide

Use the navbar-brand class inside a navbar to add a logo or title that links to your homepage. Place it as an <a> or  element inside the navbar container for proper styling and alignment.

📐

Syntax

The navbar-brand class is used on an <a> or  element inside a Bootstrap navbar. It usually contains your site logo or name and acts as a clickable link.

<a class="navbar-brand" href="#">Brand</a>: A clickable brand link.
Brand: A non-clickable brand label.

html

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

Output

A navigation bar with the word 'Brand' styled as the brand link on the left.

💻

Example

This example shows a full Bootstrap navbar with a brand logo text on the left. The brand is clickable and links to the homepage.

html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Bootstrap Navbar Brand Example</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
  <nav class="navbar navbar-expand-lg bg-light">
    <div class="container-fluid">
      <a class="navbar-brand" href="#">MySite</a>
      <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarNav">
        <ul class="navbar-nav">
          <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="#">Features</a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">Pricing</a>
          </li>
        </ul>
      </div>
    </div>
  </nav>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Output

A light-colored navigation bar with 'MySite' brand text on the left and navigation links on the right. The brand text is clickable.

⚠️

Common Pitfalls

Common mistakes when using navbar-brand include:

Not placing the brand inside the navbar container, causing styling issues.
Using navbar-brand on elements other than <a> or , which may break accessibility.
Forgetting to include the Bootstrap CSS, so the brand looks unstyled.

html

<!-- Wrong: brand outside navbar -->
<div>
  <a class="navbar-brand" href="#">Brand</a>
</div>
<nav class="navbar bg-light">
  <!-- navbar content -->
</nav>

<!-- Right: brand inside navbar -->
<nav class="navbar bg-light">
  <a class="navbar-brand" href="#">Brand</a>
</nav>

Output

The first example shows the brand link outside the navbar with no styling; the second example shows the brand styled correctly inside the navbar.

📊

Quick Reference

Tips for using navbar-brand:

Use <a> with href for clickable brand logos or names.
Use  if the brand is not a link.
Place the brand as the first child inside the navbar container for proper alignment.
Include Bootstrap CSS and JS for full styling and responsive behavior.

✅

Key Takeaways

Always place the navbar-brand inside the navbar container for correct styling.

Use an <a> element with navbar-brand for clickable logos or site names.

Include Bootstrap CSS to see the brand styled properly.

The brand usually links to the homepage, improving navigation and user experience.