Navs and Navbar Bootstrap

In Bootstrap 4, navigation elements are created using the nav component and navbar component. These components help to build responsive and customizable navigation menus.

Navs

The nav component in Bootstrap 4 is used to create simple navigation bars.

Example: Basic Nav

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>Basic Nav</title>
</head>
<body>

<nav class="nav">
  <a class="nav-link active" href="#">Active</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link" href="#">Link</a>
  <a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
</nav>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Navbar

The navbar component in Bootstrap 4 is used to create responsive navigation headers. It includes support for branding, navigation, and more, including support for collapsible navigation bars.

Example: Basic Navbar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">
    <title>Basic Navbar</title>
</head>
<body>

<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>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</body>
</html>

Explanation

Navs:
- Use the nav class to create a navigation element.
- Use nav-link to style the links.
- Use active to highlight the active link.
- Use disabled to disable a link.
Navbar:
- Use the navbar class to create a responsive navigation bar.
- Use navbar-expand-lg to make the navbar responsive.
- Use navbar-light and bg-light for light-themed navbars.
- The navbar-toggler button is used to toggle the collapse of the navbar on smaller screens.
- Use collapse navbar-collapse to wrap the collapsible content.
- Use navbar-nav for the navigation list.
- Use nav-item for each item in the list and nav-link for the links.

Additional Features

Branding: You can add branding to your navbar using the navbar-brand class.
Forms: You can include forms inside the navbar.
Dropdowns: You can create dropdown menus within the navbar.
Colors: You can change the color of the navbar using classes like bg-primary, bg-secondary, etc.

Would you like more examples or further customization tips?

Previous: Buttons

Next: Forms

At Online Learner, we're on a mission to ignite a passion for learning and empower individuals to reach their full potential. Founded by a team of dedicated educators and industry experts, our platform is designed to provide accessible and engaging educational resources for learners of all ages and backgrounds.

Terms Disclaimer About Us Contact Us