Bootstrap 4 Navs

Introduction

In our previous blog, we covered the Bootstrap Affix Plugin, Filters, and Grid System, where we learned how to fix elements on scroll, filter content with jQuery, and design responsive layouts using the Bootstrap grid. In this blog, we’ll focus on Bootstrap 4 Navs and Input Groups, which are essential components for structuring user interfaces. Navs help organize links through tabs, pills, or vertical lists, while Input Groups make forms more interactive and professional-looking.

Let’s dive deep into each topic and learn how to implement them with simple examples.

Bootstrap 4 Navs

Bootstrap navs are used to create a simple horizontal menu. These are useful when building menus or sections in a webpage using HTML and Bootstrap.

Nav Menus

Use the .nav class to create a basic navigation menu. This is one of the most common structures in HTML.

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

Aligned Nav

You can align nav items using Bootstrap’s utility classes like justify-content-center to center navs and justify-content-end to right-align the nav.

Centered link:

<ul class="nav justify-content-center">

Right-aligned nav:

<ul class="nav justify-content-end">

Vertical Nav

Use .flex-column to create a vertical stack of nav links. This is useful for sidebar navigation.

<ul class="nav flex-column">
  <li class="nav-item">
    <a class="nav-link active" href="#">Vertical Link 1</a>
  </li>
</ul>

Tabs

Use the .nav-tabs class to transform the nav menu into navigation tabs. Add the .active class to highlight the active link.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" href="#">Tab 1</a>
  </li>
</ul>

Pills

Similar to tabs but with a rounded appearance using .nav-pills.

<ul class="nav nav-pills">
  <li class="nav-item">
    <a class="nav-link active" href="#">Pill 1</a>
  </li>
</ul>

Justified Tabs/Pills

To stretch the nav items to take full width, use .nav-justified.

<ul class="nav nav-tabs nav-justified">
...
</ul>

<ul class="nav nav-pills nav-justified">
...
</ul>

Pills with Dropdown

You can include dropdowns in pills using .dropdown and .dropdown-menu.

<ul class="nav nav-pills">
  <li class="nav-item dropdown">
    <a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#">Menu</a>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Sub 1</a>
    </div>
  </li>
</ul>

Tabs with Dropdown

Same as pills, but with .nav-tabs for tab-style navigation.

Toggleable / Dynamic Tabs

Make tabs dynamic using Bootstrap’s JavaScript and add the data-toggle="tab" attribute.

<ul class="nav nav-tabs" id="myTab" role="tablist">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#home">Home</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#profile">Profile</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="home">Home Content</div>
  <div class="tab-pane fade" id="profile">Profile Content</div>
</div>

Toggleable / Dynamic Pills

<ul class="nav nav-pills" id="myPillTab">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="pill" href="#pill1">Pill 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="pill" href="#pill2">Pill 2</a>
  </li>
</ul>
<div class="tab-content">
  <div class="tab-pane fade show active" id="pill1">Pill Content 1</div>
  <div class="tab-pane fade" id="pill2">Pill Content 2</div>
</div>

Request more information

Bootstrap 4 Navs