Understanding Navigation: Bootstrap Tabs, Links, and Pills

There are options in Bootstrap for improving navigation of the content. Possible nav components include tabs and pills that are easy to style with the .nav class.

Bootstrap tabs separate data in the same wrappers but different panes. Pills are components placed in pages to speed up browsing. Also, the first step of adding links inside navbar is to apply <ul> element together with class="navbar-nav".

Bootstrap Tabs: Main Tips

• Using Bootstrap 4, you have multiple options for displaying navigation for your website.
• These options include dynamic, toggleable tabs and pills, as well as simple links.
• Using these options, you can create dynamic Bootstrap navigation bars.

Understanding Navigation

Navigation in Bootstrap 4 can be displayed by using lists and applying the .nav class to the <ul> element.

Once this is done, Bootstrap navigation menu items are created by applying the .nav-item class to the <li>elements. Lastly, the links (<a> elements) should have the .nav-link class applied to them.

Using this, you can create a simple website navigation interface. This is how it might look in HTML:

<ul class="nav">
<!-- navigation menu items -->
  <li class="nav-item">
    <a href="" class="nav-link">Homepage</a>
  </li>
</ul>

Using the .justify-content-center, you can align the Bootstrap navigation menu to the center of its container. View the example to see how that would look in a script:

<ul class="justify-content-center nav"> 
<!-- the justify-content-center class center the element horizontally -->
<!-- navigation menu items -->
</ul>

Using .justify-content-end, you can align the menu by the right side of its container. Run the code snippet above in a code editor and change the class to see the difference.

Note: both of these classes must be applied to the <ul> element to take effect.

You can also apply the .flex-column class to the <ul> to make the navigation menu vertical. In that case, your code would look like this:

<ul class="flex-column nav">
<!-- the flex-column class makes the links stack like a column --> 
<!-- navigation menu items -->
</ul>

Pros

• Easy to use with a learn-by-doing approach
• Offers quality content
• Gamified in-browser coding experience
• The price matches the quality
• Suitable for learners ranging from beginner to advanced

Main Features

• Free certificates of completion
• Focused on data science skills
• Flexible learning timetable

GET 25% OFF

Pros

• Simplistic design (no unnecessary information)
• High-quality courses (even the free ones)
• Variety of features

Main Features

• Nanodegree programs
• Suitable for enterprises
• Paid Certificates of completion

UP TO 70% OFF

Pros

• A wide range of learning programs
• University-level courses
• Easy to navigate
• Verified certificates
• Free learning track available

Main Features

• University-level courses
• Suitable for enterprises
• Verified certificates of completion

FREE COURSES

Using Bootstrap Pills

It is also possible to apply .nav-pills class to the <ul> element in order to display the Bootstrap menu options as pills. In HTML, it would look like similar to this:

<ul class="nav-pills nav">
<!-- the nav-pills class makes the links display as pills --> 
<!-- navigation menu items -->
</ul>

Let's see a few options on how you can use Bootstrap pills in your website. You will see it's possible to combine them with elements you have already read about in our previous tutorials. This way, you can create maximum functionality.

With Dropdown

Dropdown menus can also be used with Bootstrap pills.
To make it work, you must apply the .dropdown class to a <li> element and then proceed with the normal HTML for a dropdown menu. See the code snippet below to grasp the concept:

<ul class="nav-pills nav">
<!-- navigation menu items -->
  <!-- the dropdowns can be used with navigation links as well -->
  <li class="dropdown nav-item">
    <!-- dropdown menu -->
  </li>
</ul>

Toggling

Bootstrap collapsibles also work well with navigation menus. Toggleable Bootstrap pills are created by refering the links to <div> containers with the .tab class.

• To make the <a> elements capable of toggling the visibility of the collapsibles, the attribute of data-toggle is applied with the value of tab.
• In addition to that, the value of href is set to the ID of the tab that the link is supposed to open.
• Now, we must create the tabs. To make sure that only one tab is visible at a time, we wrap them inside a <div> container with the class of .tab-content.
• The tabs that are shown and hidden according to which Bootstrap pill is clicked that has <div> containers with .tab-pane and .container classes.
• In addition to that, .active class is applied to no more than one tab at a time.

Study the HTML code snippet below to see how it works:

<ul class="nav-pills nav">
<!-- navigation menu items -->
  <li class="nav-item">
    <a href="#cats" data-toggle="tab" class="nav-link">Cats</a>
  </li>
  <li class="nav-item">
    <a href="#dogs" data-toggle="tab" class="active nav-link">Dogs</a>
  </li>
  <li class="nav-item">
    <a href="#penguins" data-toggle="tab" class="disabled nav-link">Penguins</a>
  </li>
</ul>

<div class="tab-content">
<!-- pills to display -->
  <div id="cats" class="tab-pane container">Cat content</div>
  <div id="dogs" class="tab-pane active container">Dog content</div>
  <div id="penguins" class="tab-pane container">Penguin content</div>
</div>

Including Tabs

It is also possible to apply .nav-tabs class to the <ul> element in order to display the menu options as Bootstrap tabs. See the example below to get a better idea:

<ul class="nav-tabs nav">
<!-- the nav-tabs class makes the links display as tabs --> 
<!-- navigation menu items -->
</ul>

It is also possible to apply .nav-justified class to the <ul> element in order to display the menu options as tabs of equal width, taking up the full width of their container.

See an example of using .nav-justified in the code below:

<ul class="nav-justified nav">
<!-- the nav-justified class makes the links display as tabs of equal width --> 
<!-- navigation menu items -->
</ul>

With Dropdown

We already established that dropdown menus can be used with navigation links. See the example below to understand how it works with Bootstrap tabs:

<ul class="nav-tabs nav">
<!-- navigation menu items -->
  <!-- the dropdowns can be used with navigation links as well -->
  <li class="dropdown nav-item">
    <!-- dropdown menu -->
  </li>
</ul>

Toggling

Creating toggleable tabs is barely any different than creating toggleable pills.

See the code example below. You will notice the only difference in the code is the class that defines the element - the rest of the procedure stays the same:

<ul class="nav-tabs nav">
<!-- navigation menu items -->
  <li class="nav-item">
    <a href="#cats" data-toggle="tab" class="nav-link">Cats</a>
  </li>
  <li class="nav-item">
    <a href="#dogs" data-toggle="tab" class="active nav-link">Dogs</a>
  </li>
  <li class="nav-item">
    <a href="#penguins" data-toggle="tab" class="disabled nav-link">Penguins</a>
  </li>
</ul>

<div class="tab-content">
<!-- tabs to display -->
  <div id="cats" class="tab-pane container">Cat content</div>
  <div id="dogs" class="tab-pane active container">Dog content</div>
  <div id="penguins" class="tab-pane container">Penguin content</div>
</div>

Bootstrap Tabs: Summary

• Your options for Bootstrap navigation display are not limited to just links: you can also use tabs and pills on your website.
• Both these options are dynamic and toggleable.
• You can use dropdown Bootstrap menus and collapsibles with navigation links, thus creating Bootstrap navigation bars.