Bootstrap 4 Navs and Input Groups

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>

Bootstrap 4 Input Groups

The .input-group container in Bootstrap allows you to add text, icons, buttons, or dropdowns to your input fields, making your forms more powerful.

Use .input-group-prepend to add text in front, and .input-group-append to add it behind the input. Use .input-group-text to style the text.

Input Group Basic Example

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Your Email">
  <div class="input-group-append">
    <span class="input-group-text">@example.com</span>
  </div>
</div>

Input Group Sizing

Use .input-group-sm and .input-group-lg for small and large inputs.

<div class="input-group input-group-sm mb-3">
  <input type="text" class="form-control" placeholder="Small input">
</div>

<div class="input-group input-group-lg mb-3">
  <input type="text" class="form-control" placeholder="Large input">
</div>

Multiple Inputs and Helpers

<div class="input-group">
  <input type="text" class="form-control" placeholder="First Name">
  <input type="text" class="form-control" placeholder="Last Name">
</div>

Input Group with Checkboxes and Radios

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <div class="input-group-text">
      <input type="checkbox">
    </div>
  </div>
  <input type="text" class="form-control">
</div>

Input Group Buttons

<div class="input-group mb-3">
  <input type="text" class="form-control">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Go</button>
  </div>
</div>

Input Group with Dropdown Button

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <button class="btn btn-outline-secondary dropdown-toggle" data-toggle="dropdown">
      Action
    </button>
    <div class="dropdown-menu">
      <a class="dropdown-item" href="#">Option 1</a>
      <a class="dropdown-item" href="#">Option 2</a>
    </div>
  </div>
  <input type="text" class="form-control">
</div>

Input Group Labels

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text">First and Last</span>
  </div>
  <input type="text" class="form-control">
</div>

Conclusion

With Bootstrap 4 Navs and Input Groups, you can create well-structured and user-friendly navigation and form layouts. These components help make your web pages more dynamic, engaging, and easy to navigate.

In our next blog, we’ll explore Custom Forms, the Toast Plugin, and Bootstrap Utilities — essential tools for modern responsive web design. Continue your Bootstrap learning journey with Credo Systemz!

Key Takeaways:

Use .nav-tabs or .nav-pills to control nav styles.
Add .dropdown, .nav-fill, and .nav-justified for advanced navigation.
Use .input-group, .input-group-prepend, and .input-group-text to style form inputs.

Request more information

Bootstrap 4 Navs and Input Groups