Bootstrap 4 Navs

Welcome to The Coding College! In this tutorial, we will explore Bootstrap 4 Navs, a versatile component for creating navigation menus such as tabs, pills, and more.

Navigation components are essential for structuring and organizing your website. Bootstrap 4 simplifies the process with its flexible and customizable Navs.

What Are Bootstrap 4 Navs?

Navs in Bootstrap 4 are a lightweight, versatile way to build simple navigation menus. They can be styled as tabs, pills, or inline links and are perfect for creating dynamic user interfaces.

Basic Nav

A basic navigation component is easy to create using the .nav class.

Example:

<!DOCTYPE html>  
<html lang="en">  
<head>  
  <meta charset="UTF-8">  
  <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  <title>Bootstrap 4 Navs</title>  
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">  
</head>  
<body>  
  <div class="container my-5">  
    <h2>Basic Nav</h2>  
    <ul class="nav">  
      <li class="nav-item">  
        <a class="nav-link active" 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>  

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

Key Features:

  • .nav: Applies base styling to the navigation.
  • .nav-item: Wraps each navigation link.
  • .nav-link: Styles individual links.
  • .active: Highlights the active link.

Nav with Pills

Pills-style navigation adds a rounded button-like appearance to links.

Example:

<div class="container my-5">  
  <h2>Nav with Pills</h2>  
  <ul class="nav nav-pills">  
    <li class="nav-item">  
      <a class="nav-link active" 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>

Explanation:

  • .nav-pills: Adds the pill-style design to navigation links.

Nav with Tabs

Tabs-style navigation is another popular choice for separating content into sections.

Example:

<div class="container my-5">  
  <h2>Nav with Tabs</h2>  
  <ul class="nav nav-tabs">  
    <li class="nav-item">  
      <a class="nav-link active" href="#">Home</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="#">Profile</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="#">Messages</a>  
    </li>  
  </ul>  
</div>

Explanation:

  • .nav-tabs: Adds the tab-style design to the navigation links.

Vertical Navs

Navs can also be displayed vertically by adding the .flex-column class.

Example:

<div class="container my-5">  
  <h2>Vertical Nav</h2>  
  <ul class="nav flex-column">  
    <li class="nav-item">  
      <a class="nav-link active" href="#">Dashboard</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="#">Orders</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="#">Products</a>  
    </li>  
  </ul>  
</div>

Explanation:

  • .flex-column: Arranges the navigation links vertically.

Justified Navs

To make the nav links fill the width of their container, use the .nav-justified class.

Example:

<div class="container my-5">  
  <h2>Justified Nav</h2>  
  <ul class="nav nav-pills nav-justified">  
    <li class="nav-item">  
      <a class="nav-link active" href="#">Home</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>

Explanation:

  • .nav-justified: Ensures links are evenly distributed and fill the width of the container.

Practical Example: Tabs with Dropdown

You can integrate dropdowns within tabs for a more dynamic navigation experience.

Example:

<div class="container my-5">  
  <h2>Tabs with Dropdown</h2>  
  <ul class="nav nav-tabs">  
    <li class="nav-item">  
      <a class="nav-link active" href="#">Home</a>  
    </li>  
    <li class="nav-item">  
      <a class="nav-link" href="#">Profile</a>  
    </li>  
    <li class="nav-item dropdown">  
      <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Dropdown</a>  
      <div class="dropdown-menu">  
        <a class="dropdown-item" href="#">Action</a>  
        <a class="dropdown-item" href="#">Another action</a>  
      </div>  
    </li>  
  </ul>  
</div>

Key Features:

  • .dropdown: Adds dropdown functionality to a nav item.
  • .dropdown-menu: Contains the dropdown options.

Responsive Navs

Bootstrap 4 Navs are inherently responsive. However, for advanced responsiveness, integrate them with the navbar component.

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">  
    <span class="navbar-toggler-icon"></span>  
  </button>  
  <div class="collapse navbar-collapse" id="navbarNav">  
    <ul class="nav nav-pills">  
      <li class="nav-item">  
        <a class="nav-link active" 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>

Customization

You can customize Bootstrap 4 Navs with additional classes, colors, and styles. For example:

  • Add utility classes like .text-center or .bg-primary.
  • Use custom CSS for further styling.

Conclusion

Bootstrap 4 Navs are versatile and easy to implement, making them a must-have for any web developer. From tabs and pills to vertical and responsive designs, the possibilities are endless.

Leave a Comment