Bootstrap - Navigation Demo

Ethan D. - June 1, 2024

Creating a Basic Navigation Bar

To create a navigation bar using Bootstrap, you'll need to use the <nav> element. The <nav> element is an HTML5 semantic element that represents a section of a page intended for navigation links. It helps screen readers and other assistive technologies understand the purpose of the links within the navigation.

Bootstrap provides several classes that you can use to style and structure your navigation bar:

Class	Description
`.navbar`	This class is the main container for the navigation bar. It sets the default styles for the navigation bar, such as padding, margin, and positioning.
`.navbar-expand`	This class is used to specify at which breakpoint the navigation bar should switch from a collapsed state to an expanded state. You can use `.navbar-expand-sm`, `.navbar-expand-md`, `.navbar-expand-lg`, or `.navbar-expand-xl` depending on your desired breakpoint.
`.navbar-light`	This class is used to set the color scheme of the navigation bar to a light color. It changes the text color and background color of the navigation items to ensure proper contrast.
`.bg-light`	This class sets the background color of the navigation bar to a light gray color. You can replace "light" with other color options such as "dark", "primary", "success", etc., to change the background color.

Example: Basic Navigation Bar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Logo</a>
</nav>

The <nav> element is used as the main container for the navigation bar.
The .navbar class is applied to set the default styles for the navigation bar.
The .navbar-expand-lg class is used to specify that the navigation bar should switch to an expanded state on large screens (width >= 992px).
The .navbar-light class sets the color scheme of the navigation bar to a light color.
The .bg-light class sets the background color of the navigation bar to a light gray color.
The .navbar-brand class is used to style the brand logo or text within the navigation bar.

With this basic structure in place, you can now add navigation items and further customize your navigation bar to fit your website's design and requirements.

Adding Navigation Items

To add navigation items to your Bootstrap navigation bar, use an unordered list (<ul>) and list item (<li>) elements. Bootstrap has classes to style and structure these navigation items.

The .nav class is used on the <ul> element to create a navigation list. Each navigation item is wrapped in an <li> element with the .nav-item class. This class sets the margins and padding for the navigation items.

To create links within the navigation items, use the <a> element with the .nav-link class. The .nav-link class styles the links to have a consistent look and behavior, such as color, padding, and hover effects.

Example: Adding navigation items to your navigation bar

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Logo</a>
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" 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>
</nav>

Element	Class	Purpose
`<ul>`	`.navbar-nav`	Creates a vertical navigation list
`<li>`	`.nav-item`	Wraps each navigation item
`<a>`	`.nav-link`	Creates links within the navigation items

The href attribute of the <a> element sets the destination URL for each navigation link. Replace # with the actual URL of your pages.

You can add as many navigation items as needed to your navigation bar. The navigation items will be displayed horizontally by default, thanks to the .navbar-expand-lg class used in the previous example.

You can customize the text and URLs of the navigation items to match your website's structure and content. You can also add active states to show the current page by using the .active class on the corresponding .nav-item element.

With the navigation items in place, you can customize the look and behavior of your navigation bar to match your design preferences.

Customizing the Navigation Bar

Bootstrap has classes that let you customize the look of your navigation bar to match your website's design. In this section, we'll see how to change the background color, text color, and add a brand logo or text to your navigation bar.

Changing the Background Color

To change the background color of your navigation bar, replace the .bg-light class with one of these classes:

Class	Description
`.bg-primary`	Sets the background color to the primary color defined in your Bootstrap theme (default is blue).
`.bg-secondary`	Sets the background color to the secondary color defined in your Bootstrap theme (default is gray).
`.bg-dark`	Sets the background color to a dark shade (default is dark gray).
`.bg-light`	Sets the background color to a light shade (default is light gray).

You can also use custom background colors by using a custom CSS class or inline styles on the <nav> element.

Example

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <!-- Navigation items -->
</nav>

Changing the Text Color

To change the text color of the navigation items, use the .navbar-dark class with the right background color class.

Class	Description
`.navbar-light`	Sets the text color to a light color (default is black) good for light backgrounds.
`.navbar-dark`	Sets the text color to a dark color (default is white) good for dark backgrounds.

Example

<nav class="navbar navbar-expand-lg navbar-dark bg-dark">
  <ul class="navbar-nav">
    <li class="nav-item">
      <a class="nav-link" 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="#">Contact</a>
    </li>
  </ul>
</nav>

Adding a Brand Logo or Text

To add a brand logo or text to your navigation bar, use the .navbar-brand class on an <a> element or an <img> element inside the <nav> element.

Example

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">
    <img src="path/to/logo.png" alt="Logo" height="30">
  </a>
  <!-- Navigation items -->
</nav>

Example

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Brand</a>
  <!-- Navigation items -->
</nav>

By customizing the background color, text color, and adding a brand logo or text, you can create a navigation bar that matches your website's look.

Responsive Navigation with Toggler

Responsive navigation is an important part of modern web design, as it makes your website's navigation menu usable across various devices and screen sizes. Bootstrap lets you create a responsive navigation bar with a toggler button that collapses and expands the menu items on smaller screens.

To create a collapsible navigation menu, use the .navbar-toggler class on a <button> element inside your <nav> element. This button will be visible on smaller screens and will toggle the visibility of the navigation items when clicked.

Example: Navbar toggler button

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Logo</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>
  <!-- Navigation items -->
</nav>

The .navbar-toggler class styles the button to have a default hamburger icon and padding. The data-toggle="collapse" attribute specifies that the button should toggle the visibility of an element with the "collapse" class. The data-target="#navbarNav" attribute specifies the ID of the element to be toggled, which in this case is the <div> containing the navigation items.

To make the navigation items collapsible, wrap them inside a <div> element with the .collapse and .navbar-collapse classes. The .collapse class hides the content by default, while the .navbar-collapse class provides the styles for the collapsible navigation menu.

Example: Collapsible navigation items

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Logo</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">
        <a class="nav-link" 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="#">Contact</a>
      </li>
    </ul>
  </div>
</nav>

The id attribute of the <div> element should match the value specified in the data-target attribute of the .navbar-toggler button. This is how Bootstrap knows which element to toggle when the button is clicked.

With this setup, the navigation items will be hidden on smaller screens and will only be visible when the toggler button is clicked. On larger screens, the navigation items will be visible by default, and the toggler button will be hidden.

Adding Dropdown Menus

Dropdown menus are a useful feature in navigation bars, allowing you to group related links together and save space. Bootstrap makes it easy to create dropdown menus within your navigation bar using the .dropdown and .dropdown-menu classes.

To create a dropdown menu, start by adding the .dropdown class to a <li> element within your navigation list. This will act as the container for the dropdown toggle button and the dropdown menu itself.

Inside the .dropdown container, create a link or button element that will serve as the dropdown toggle. Apply the .dropdown-toggle class to this element, along with the data-toggle="dropdown" attribute. This tells Bootstrap to toggle the visibility of the dropdown menu when the button is clicked.

Example: Dropdown Toggle

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <!-- Dropdown menu items go here -->
</li>

Next, create a <div> element with the .dropdown-menu class. This will be the container for your dropdown menu items. Inside this <div>, add your dropdown menu items using <a> elements with the .dropdown-item class.

Example: Dropdown Menu

<li class="nav-item dropdown">
  <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
    Dropdown
  </a>
  <div class="dropdown-menu" aria-labelledby="navbarDropdown">
    <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>
</li>

The aria-labelledby attribute on the .dropdown-menu should match the id of the dropdown toggle button. This helps with accessibility by associating the dropdown menu with its toggle button.

Example: Complete Navigation Bar with Dropdown

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Your Logo</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 dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <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>
      </li>
    </ul>
  </div>
</nav>

By using the .dropdown, .dropdown-toggle, and .dropdown-menu classes, you can easily add dropdown menus to your Bootstrap navigation bar. This helps organize your navigation links and provides a clean and intuitive way for users to access different sections of your website.

Styling and Customizing Bootstrap Navigation Bars

Bootstrap provides a foundation for creating navigation bars, but you may want to customize the appearance to match your website's design. Here are ways to style and customize your Bootstrap navigation bar.

Changing Font Styles and Sizes

To change the font styles and sizes of your navigation bar, you can use custom CSS. Target the elements you want to modify and apply your styles.

Example: Changing Font Styles and Sizes

.navbar-brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 24px;
  font-weight: bold;
}

.nav-link {
  font-family: 'Open Sans', sans-serif;
  font-size: 16px;
}

Adding Padding and Margins

To adjust the spacing within your navigation bar, you can add padding and margins to the elements.

Example: Adding Padding and Margins

.navbar {
  padding: 20px;
}

.nav-item {
  margin-right: 15px;
}

Modifying Hover and Active States

To provide visual feedback when a user hovers over or clicks on a navigation item, you can modify the hover and active states using CSS.

Example: Modifying Hover and Active States

.nav-link:hover {
  color: #ff5500;
}

.nav-item.active .nav-link {
  font-weight: bold;
  color: #ff5500;
}

Place your custom styles in a separate CSS file or within <style> tags in your HTML file, and make sure they're loaded after the Bootstrap CSS file to allow overriding the default styles.

Example: Combining Custom Styles with Bootstrap

<head>
  <!-- Include Bootstrap CSS -->
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">

  <!-- Custom Styles -->
  <style>
    .navbar {
      padding: 20px;
      background-color: #f8f9fa;
    }

    .navbar-brand {
      font-family: 'Montserrat', sans-serif;
      font-size: 24px;
      font-weight: bold;
      color: #333;
    }

    .nav-link {
      font-family: 'Open Sans', sans-serif;
      font-size: 16px;
      color: #555;
      margin-right: 15px;
    }

    .nav-link:hover {
      color: #ff5500;
    }

    .nav-item.active .nav-link {
      font-weight: bold;
      color: #ff5500;
    }
  </style>
</head>
<body>
  <nav class="navbar navbar-expand-lg">
    <a class="navbar-brand" href="#">Your Logo</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</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>

  <!-- Include Bootstrap JS and jQuery -->
  <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>

By customizing the font styles, sizes, padding, margins, and hover/active states, you can give your Bootstrap navigation bar a look that matches your website's design.