Welcome to the start of our comprehensive journey into Bootstrap navbars! In this unit, we'll focus on setting up a basic navbar. We've touched upon the HTML structure and CSS in previous lessons, so this will be a smooth transition into combining those skills with Bootstrap's powerful tools.

In this lesson, you will learn how to set up a basic navbar using Bootstrap. We'll go step-by-step to build a navbar that contains links to different sections like Home, Features, and Pricing. Here is a sneak peek of what you will achieve:

HTML, XML
Copy to clipboard
1<!-- Navbar -->
2<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
3  <div class="container-fluid">
4    <a class="navbar-brand" href="#">Navbar</a>
5    <div class="collapse navbar-collapse" id="navbarNav">
6      <ul class="navbar-nav">
7        <li class="nav-item">
8          <a class="nav-link active" href="#">Home</a>
9        </li>
10        <li class="nav-item">
11          <a class="nav-link" href="#">Features</a>
12        </li>
13        <li class="nav-item">
14          <a class="nav-link" href="#">Pricing</a>
15        </li>
16      </ul>
17    </div>
18  </div>
19</nav>

Here's how the navbar works, and all of the key parts that make up the navbar above:

• Navbar Container: The entire navbar is wrapped in a <nav> element with the class navbar, which sets it as a Bootstrap navbar:
• The class navbar-expand-lg makes the navbar responsive, expanding it on large screens and collapsing it on smaller screens.
• The navbar-dark class sets the text color to light.
• The bg-primary class gives the navbar a primary color background.

In the forth unit, we'll explore the various customization options Bootstrap offers for navbars (and not only!), enhancing and personalizing your navigation bars to suit your website's style.

This setup ensures your navbar looks great on any device, adapting to different screen sizes seamlessly.

• Brand Name: Inside the navbar, there's an anchor tag with the class navbar-brand. This is typically used for the company or website name, making it stand out in the navbar.

  Think of this as your website's identity. It's usually the first thing users see and click on to return to the homepage.

• Navbar Links: The unordered list (<ul>) inside the <div class="collapse navbar-collapse" id="navbarNav"> contains the navigation links. Each list item (<li>) has a class nav-item, and the anchor tags inside them have the class nav-link. The class active on the "Home" link indicates the currently active page.

  These links are the heart of your navbar, guiding users to different sections of your site. In the next unit, we'll explore practical examples of linking your navbar to different sections of the website, showing how they work in action!

Understanding these components will make you confident in setting up and customizing your own Bootstrap navbar.

A well-designed navbar is crucial for any website, as it helps users navigate through different sections efficiently. By mastering the basic setup of a Bootstrap navbar, you are laying the foundation for creating more complex and user-friendly navigation systems. This skill will be invaluable in virtually any web project you undertake, making your work not only functional but also visually appealing and easy to use.

Feeling ready to get hands-on? Let's move on to the practice section and start building your first Bootstrap navbar.