Bootstrap - Navs & tabs

Creating a Basic Nav

When creating a navigation menu in Bootstrap, you have the option to use either the <nav> or <ul> elements. The <nav> element is a semantic HTML5 tag designed for navigation menus, while the <ul> element is a general-purpose unordered list tag. Although both can be used to create navs, it's recommended to use the <nav> element for better accessibility and SEO.

To create a basic nav in Bootstrap, start by adding the .nav class to the <ul> element. This class applies the necessary styles to make the list items appear as a navigation menu. Each list item (<li>) within the <ul> should have the .nav-item class, and the links (<a>) inside the list items should have the .nav-link class. These classes provide additional styling and spacing for the nav items and links.

By default, the nav items are aligned horizontally. You can easily change the alignment to vertical by adding the .flex-column class to the <ul> element. This stacks the nav items vertically, creating a vertical navigation menu.

<nav>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link" 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="#">Services</a>
    </li>
    <li class="nav-item">
      <a class="nav-link" href="#">Contact</a>
    </li>
  </ul>
</nav>

<nav>
  <ul class="nav flex-column">
    ...
  </ul>
</nav>

Customizing Nav Styles

Bootstrap provides classes and utilities to customize the look of your navigation menus. You can apply background colors, borders, font styles, and more to make your navs match your website's design.

To change the background color of your nav, you can use the .bg-* classes provided by Bootstrap. For example, adding the .bg-light class to the <ul> element will give your nav a light gray background color. Similarly, you can use .bg-dark for a dark background or .bg-primary for a primary color background. If you want to add borders to your nav, you can use the .border and .border-* classes to control the border style, width, and color.

Customizing the font styles and sizes of your nav items is also straightforward. You can use the .font-weight-* classes to adjust the font weight, such as .font-weight-bold for bold text or .font-weight-light for lighter text. To change the font size, you can use the .text-* classes, like .text-sm for small text or .text-lg for large text.

To improve the interactivity of your nav items, you can add hover and active states. Bootstrap provides the .active class, which you can add to the .nav-item to indicate the currently active page or section. For hover effects, you can use CSS to style the .nav-link:hover selector, applying different background colors, text colors, or underlines when the user hovers over a nav item.

If you want to create a responsive navigation menu that collapses into a hamburger menu on smaller screens, you can use the .navbar class with the .navbar-toggler and .navbar-collapse classes. The .navbar class creates a full-width navigation bar, while the .navbar-toggler and .navbar-collapse classes handle the toggling and collapsing of the nav items on smaller screens.

<nav>
  <ul class="nav bg-light border">
    ...
  </ul>
</nav>

<nav>
  <ul class="nav">
    <li class="nav-item">
      <a class="nav-link font-weight-bold text-lg" href="#">Home</a>
    </li>
    ...
  </ul>
</nav>

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

<style>
  .nav-link:hover {
    background-color: #f8f9fa;
    text-decoration: underline;
  }
</style>

Implementing Tabs

To create tabs in Bootstrap, use the .nav-tabs class on the <ul> element. This class styles the nav items as tabs, with an active state for the selected tab.

To link the tabs to their content, use the data-toggle and data-target attributes on the tab links. Set data-toggle to "tab", indicating that the link should toggle a tab. The data-target attribute specifies the ID of the tab content to display when the tab is clicked.

The tab content is wrapped in a .tab-content container, and each tab pane has a .tab-pane class. The .tab-pane elements should have unique IDs that match the data-target attributes of the tab links. Add the .fade class to the .tab-pane elements to create a fading transition effect when switching tabs.

To activate a tab with JavaScript, use the tab() method provided by Bootstrap. Select the tab link element using JavaScript and call the tab() method on it. This will activate the tab and display its content.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#tab1">Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab2">Tab 2</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab3">Tab 3</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="tab1">
    <h3>Tab 1 Content</h3>
    <p>This is the content for Tab 1.</p>
  </div>
  <div class="tab-pane fade" id="tab2">
    <h3>Tab 2 Content</h3>
    <p>This is the content for Tab 2.</p>
  </div>
  <div class="tab-pane fade" id="tab3">
    <h3>Tab 3 Content</h3>
    <p>This is the content for Tab 3.</p>
  </div>
</div>

To activate a tab using JavaScript:

<script>
  $(document).ready(function() {
    $('a[data-toggle="tab"][href="#tab2"]').tab('show');
  });
</script>

Advanced Tab Features

Bootstrap tabs offer several features that let you create complex and dynamic tab structures. Let's look at some of these features.

Nesting tabs within tabs is a technique when you need to organize content into a hierarchical structure. To do this, create a new set of tabs inside a tab pane of the parent tabs. The nested tabs will work independently of the parent tabs, letting users navigate through different levels of content.

<ul class="nav nav-tabs">
  <li class="nav-item">
    <a class="nav-link active" data-toggle="tab" href="#tab1">Parent Tab 1</a>
  </li>
  <li class="nav-item">
    <a class="nav-link" data-toggle="tab" href="#tab2">Parent Tab 2</a>
  </li>
</ul>

<div class="tab-content">
  <div class="tab-pane fade show active" id="tab1">
    <h3>Parent Tab 1 Content</h3>
    <ul class="nav nav-tabs">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#subtab1">Child Tab 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#subtab2">Child Tab 2</a>
      </li>
    </ul>
    <div class="tab-content">
      <div class="tab-pane fade show active" id="subtab1">
        <p>Child Tab 1 Content</p>
      </div>
      <div class="tab-pane fade" id="subtab2">
        <p>Child Tab 2 Content</p>
      </div>
    </div>
  </div>
  <div class="tab-pane fade" id="tab2">
    <h3>Parent Tab 2 Content</h3>
    <p>This is the content for Parent Tab 2.</p>
  </div>
</div>

In addition to the default horizontal tabs, Bootstrap also supports vertical tabs. To create vertical tabs, use the .nav-pills class instead of .nav-tabs and add the .flex-column class to the <ul> element. This will stack the tabs vertically and style them as pills.

<div class="row">
  <div class="col-3">
    <ul class="nav nav-pills flex-column">
      <li class="nav-item">
        <a class="nav-link active" data-toggle="tab" href="#vtab1">Tab 1</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#vtab2">Tab 2</a>
      </li>
      <li class="nav-item">
        <a class="nav-link" data-toggle="tab" href="#vtab3">Tab 3</a>
      </li>
    </ul>
  </div>
  <div class="col-9">
    <div class="tab-content">
      <div class="tab-pane fade show active" id="vtab1">
        <h3>Tab 1 Content</h3>
        <p>This is the content for Tab 1.</p>
      </div>
      <div class="tab-pane fade" id="vtab2">
        <h3>Tab 2 Content</h3>
        <p>This is the content for Tab 2.</p>
      </div>
      <div class="tab-pane fade" id="vtab3">
        <h3>Tab 3 Content</h3>
        <p>This is the content for Tab 3.</p>
      </div>
    </div>
  </div>
</div>

To make tab transitions visually appealing, you can animate them using CSS. Bootstrap includes the .fade class, which applies a fading transition effect when switching tabs. You can change the transition duration and timing function by modifying the .tab-pane class in your CSS.

.tab-pane {
  transition: opacity 0.3s ease-in-out;
}

You can add and remove tabs using JavaScript. To add a new tab, create a new <li> element with the appropriate classes and attributes, and append it to the <ul> element containing the tabs. To remove a tab, select the corresponding <li> element and remove it from the DOM. Update the tab content when adding or removing tabs.

let tabId = 'newTab';
let tabTitle = 'New Tab';
let tabContent = '<div class="tab-pane fade" id="' + tabId + '"><h3>New Tab Content</h3><p>This is the content for the new tab.</p></div>';

$('.nav-tabs').append('<li class="nav-item"><a class="nav-link" data-toggle="tab" href="#' + tabId + '">' + tabTitle + '</a></li>');
$('.tab-content').append(tabContent);

These tab features in Bootstrap let you create rich and interactive tab interfaces that adapt to your needs. Bootstrap provides the tools and flexibility to implement nested tabs, vertical tabs, animated transitions, or dynamically generated tabs.