Bootstrap - Navbars: Your Gateway to Professional Web Navigation

Hello there, future web developers! Today, we're going to dive into one of the most important components of modern web design: the navbar. As your friendly neighborhood computer teacher, I'm excited to guide you through the wonderful world of Bootstrap navbars. So grab your favorite beverage, get comfortable, and let's embark on this coding adventure together!

Bootstrap - Navbars

How it Works

Before we start building our navbars, let's understand what they are and how they work. A navbar, short for navigation bar, is like the map of your website. It helps users find their way around your digital creation. In Bootstrap, navbars are responsive and collapse by default, which means they adjust beautifully to different screen sizes. Isn't that neat?

Basic Navbar

Let's start with a basic navbar. Here's a simple example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">MyWebsite</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
</nav>

Let's break this down:

We start with a <nav> element with Bootstrap classes.
The navbar-brand class is for your website name or logo.
The navbar-toggler is for mobile view, creating that famous "hamburger" menu.
Inside the navbar-collapse div, we have our navigation items in an unordered list.

Vertical Navbar

Want to shake things up? Let's try a vertical navbar:

<nav class="navbar navbar-light bg-light flex-column">
  <a class="navbar-brand" href="#">Vertical Nav</a>
  <nav class="nav flex-column">
    <a class="nav-link active" href="#">Home</a>
    <a class="nav-link" href="#">About</a>
    <a class="nav-link" href="#">Services</a>
    <a class="nav-link" href="#">Contact</a>
  </nav>
</nav>

The magic here is in the flex-column class. It turns our horizontal navbar into a sleek vertical one. Cool, right?

Centered Navbar

For those who like everything aligned just so, here's how to center your navbar items:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="navbar-nav mx-auto">
    <a class="nav-item nav-link active" href="#">Home</a>
    <a class="nav-item nav-link" href="#">About</a>
    <a class="nav-item nav-link" href="#">Services</a>
    <a class="nav-item nav-link" href="#">Contact</a>
  </div>
</nav>

The mx-auto class is our centering superhero here. It applies automatic margins on both sides, centering our content.

Brand

Your brand is your identity. Let's see how to make it shine:

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
</nav>

This code adds a logo next to your brand name. The d-inline-block and align-top classes ensure everything lines up nicely.

Text

Sometimes, you just need some plain text in your navbar:

<nav class="navbar navbar-light bg-light">
  <span class="navbar-text">
    Navbar text with an inline element
  </span>
</nav>

The navbar-text class styles your text to match the navbar's appearance.

Images and Text

Let's combine images and text for a more dynamic navbar:

<nav class="navbar navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="/path/to/logo.png" width="30" height="30" class="d-inline-block align-top" alt="">
    Bootstrap
  </a>
  <span class="navbar-text">
    Welcome to our website!
  </span>
</nav>

This creates a navbar with both a logo and a welcoming message. Doesn't that look professional?

Nav

The nav component is the heart of our navbar. Let's look at a more complex example:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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 active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></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>
      <li class="nav-item">
        <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
      </li>
    </ul>
  </div>
</nav>

This example includes an active link, regular links, and a disabled link. The sr-only class is for screen readers, improving accessibility.

Navbar Without List

For a cleaner look, you can create a navbar without a list:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="navbar-nav">
    <a class="nav-item nav-link active" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
    <a class="nav-item nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
  </div>
</nav>

This achieves the same result without using <ul> and <li> tags.

Navbar with Dropdown

Ready to level up? Let's add a dropdown to our navbar:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <div class="navbar-nav">
    <a class="nav-item nav-link active" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Link</a>
    <div class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
        Dropdown link
      </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </div>
  </div>
</nav>

The dropdown-toggle class creates the dropdown effect, while dropdown-menu and dropdown-item style the dropdown content.

Forms

Need a search bar? No problem! Here's how to add a form to your navbar:

<nav class="navbar navbar-light bg-light">
  <form class="form-inline">
    <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
    <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
  </form>
</nav>

The form-inline class keeps our form elements in a line, perfect for navbars.

Color Schemes

Bootstrap offers various color schemes. Here's a dark navbar:

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <a class="navbar-brand" href="#">Dark Navbar</a>
  <div class="navbar-nav">
    <a class="nav-item nav-link active" href="#">Home</a>
    <a class="nav-item nav-link" href="#">Features</a>
    <a class="nav-item nav-link" href="#">Pricing</a>
  </div>
</nav>

Just change navbar-light to navbar-dark and bg-light to bg-dark. Simple!

Containers

For better alignment, you can wrap your navbar content in a container:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <div class="container">
    <a class="navbar-brand" href="#">Contained Navbar</a>
    <div class="navbar-nav">
      <a class="nav-item nav-link active" href="#">Home</a>
      <a class="nav-item nav-link" href="#">Features</a>
      <a class="nav-item nav-link" href="#">Pricing</a>
    </div>
  </div>
</nav>

The container class centers the content and provides a responsive fixed width.

Placement

Fixed Top

Want your navbar to stick to the top? Here's how:

<nav class="navbar fixed-top navbar-light bg-light">
  <a class="navbar-brand" href="#">Fixed top</a>
</nav>

The fixed-top class makes your navbar stay at the top of the page as users scroll.

Responsive Behaviors

Bootstrap navbars are responsive by default. They collapse on smaller screens and expand on larger ones. The key is in the navbar-expand-* class:

<nav class="navbar navbar-expand-md navbar-light bg-light">
  <!-- Navbar content -->
</nav>

This navbar will expand on medium-sized screens and larger.

Toggler

The navbar toggler is what creates the "hamburger" menu on mobile devices:

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-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">
    <!-- Navbar content -->
  </div>
</nav>

The navbar-toggler button controls the visibility of the navbar content on smaller screens.

External Content

You can toggle content outside the navbar too:

<nav class="navbar navbar-light bg-light">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
</nav>
<div class="collapse" id="navbarToggleExternalContent">
  <div class="bg-dark p-4">
    <h5 class="text-white h4">Collapsed content</h5>
    <span class="text-muted">Toggleable via the navbar brand.</span>
  </div>
</div>

This creates a toggler that controls content outside the navbar itself.

Offcanvas

Lastly, let's look at an offcanvas navbar:

<nav class="navbar navbar-light bg-light">
  <div class="container-fluid">
    <button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar" aria-controls="offcanvasNavbar">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="offcanvas offcanvas-end" tabindex="-1" id="offcanvasNavbar" aria-labelledby="offcanvasNavbarLabel">
      <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasNavbarLabel">Offcanvas</h5>
        <button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas" aria-label="Close"></button>
      </div>
      <div class="offcanvas-body">
        <!-- Offcanvas content -->
      </div>
    </div>
  </div>
</nav>

This creates a sidebar that slides in from the side of the screen, perfect for mobile navigation.

And there you have it, folks! We've journeyed through the land of Bootstrap navbars, from basic structures to advanced features. Remember, practice makes perfect, so don't be afraid to experiment with these examples. Happy coding, and may your navbars always guide your users true!

Method	Description
`.navbar()`	Initializes the navbar component
`.collapse('toggle')`	Toggles the navbar collapse
`.collapse('show')`	Shows the navbar collapse
`.collapse('hide')`	Hides the navbar collapse
`.offcanvas('toggle')`	Toggles the offcanvas navbar
`.offcanvas('show')`	Shows the offcanvas navbar
`.offcanvas('hide')`	Hides the offcanvas navbar

Credits: Image by storyset

Previous Tutorial:

Bootstrap - Modal

Next Tutorial:

Bootstrap - Navs & tabs