Bootstrap / Bootstrap Navigation and Menus

Creating Tabbed Navigation Interfaces

This tutorial will teach you how to create a tabbed navigation interface using HTML and Bootstrap. Tabbed navigation is a great way to organize related content in a user-friendly …

Tutorial 4 of 5 5 resources in this section
Sections Bootstrap Basics Bootstrap Layout and Grid System Bootstrap Typography and Colors Bootstrap Components and UI Elements Bootstrap Forms and Input Controls Bootstrap Utilities and Helpers Bootstrap Navigation and Menus Bootstrap Modals and Popups Bootstrap Icons and SVGs Bootstrap Carousel and Sliders Bootstrap Advanced Components Bootstrap Themes and Customization Bootstrap Accessibility and Best Practices

Section overview

5 resources

Covers navigation components such as navbars, dropdowns, and pagination.

1. Introduction

Goal of the Tutorial

In this tutorial, we will create a tabbed navigation interface using HTML and Bootstrap. Tabbed navigation is an effective way to display multiple related content in a single view, improving user experience.

What You Will Learn

You will learn how to:
- Construct a basic HTML layout
- Implement Bootstrap
- Create a tabbed navigation interface

Prerequisites

Basic knowledge of HTML and CSS is required. Familiarity with Bootstrap would be beneficial.

2. Step-by-Step Guide

Basic HTML Layout

We'll start by creating a simple HTML layout with the <!DOCTYPE html> declaration, a element, a element, and a element.

Implementing Bootstrap

Bootstrap is a powerful front-end framework that can help you design websites faster and easier. It includes HTML and CSS based design templates for typography, forms, buttons, tables, navigation, modals, image carousels, and many other, as well as optional JavaScript plugins.

You can include Bootstrap in your project by linking to the Bootstrap CDN in the section of your HTML file.

Creating a Tabbed Navigation Interface

To create a tabbed navigation interface, we will use the Bootstrap's tabs component. Each tab's label will be in a

  • element and the content for each tab will be in a
    element.

    3. Code Examples

    Here's a simple example of a tabbed navigation interface:

    <!DOCTYPE html>
<html>
<head>
    <!-- Link to Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <!-- Navigation Tabs -->
        <ul class="nav nav-tabs">
            <li class="nav-item">
                <a class="nav-link active" href="#home" data-toggle="tab">Home</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#profile" data-toggle="tab">Profile</a>
            </li>
            <li class="nav-item">
                <a class="nav-link" href="#messages" data-toggle="tab">Messages</a>
            </li>
        </ul>

        <!-- Tab Content -->
        <div class="tab-content">
            <div class="tab-pane active" id="home">This is the Home tab.</div>
            <div class="tab-pane" id="profile">This is the Profile tab.</div>
            <div class="tab-pane" id="messages">This is the Messages tab.</div>
        </div>
    </div>

    <!-- Link to Bootstrap JS and its dependencies -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

    In this example, we have three tabs: Home, Profile, and Messages. Each tab is linked to its corresponding content using the href attribute and the data-toggle="tab" attribute. The class "active" is added to the first tab to make it the default active tab.

    4. Summary

    In this tutorial, you've learned how to:
    - Create a basic HTML layout
    - Implement Bootstrap in your project
    - Design a tabbed navigation interface using Bootstrap

    For further learning, you can explore more about Bootstrap components and utilities.

    5. Practice Exercises

    1. Create a tabbed navigation interface with five tabs.

    2. Add an icon to each tab using Bootstrap's icon classes.

    3. Make the second tab the default active tab.

    Solutions:

    1. You can simply copy the

    2. element and the
      element from the example above and change the href attribute, the text content, and the id attribute accordingly.

    3. To add an icon, you can add a element with the relevant Bootstrap icon class inside the element. For example:

    <a class="nav-link" href="#home" data-toggle="tab">
    <i class="fas fa-home"></i> Home
</a>
    1. To make the second tab the default active tab, remove the "active" class from the first tab and add it to the second tab.

    Remember, practice is the key to mastering any skill, so make sure to practice these exercises to become proficient in creating tabbed navigation interfaces.

    Need Help Implementing This?

    We build custom systems, plugins, and scalable infrastructure.

    Discuss Your Project
    Previous Tutorial Next Tutorial

    • Related topics

    Keep learning with adjacent tracks.

    View category

    HTML

    Learn the fundamental building blocks of the web using HTML.

    Explore

    CSS

    Master CSS to style and format web pages effectively.

    Explore

    JavaScript

    Learn JavaScript to add interactivity and dynamic behavior to web pages.

    Explore

    Python

    Explore Python for web development, data analysis, and automation.

    Explore

    SQL

    Learn SQL to manage and query relational databases.

    Explore

    PHP

    Master PHP to build dynamic and secure web applications.

    Explore

    Popular tools

    Helpful utilities for quick tasks.

    Browse tools

    URL Encoder/Decoder

    Encode or decode URLs easily for web applications.

    Use tool

    Interest/EMI Calculator

    Calculate interest and EMI for loans and investments.

    Use tool

    Case Converter

    Convert text to uppercase, lowercase, sentence case, or title case.

    Use tool

    MD5/SHA Hash Generator

    Generate MD5, SHA-1, SHA-256, or SHA-512 hashes.

    Use tool

    Text Diff Checker

    Compare two pieces of text to find differences.

    Use tool

    Latest articles

    Fresh insights from the CodiWiki team.

    Visit blog

    AI in Drug Discovery: Accelerating Medical Breakthroughs

    In the rapidly evolving landscape of healthcare and pharmaceuticals, Artificial Intelligence (AI) in drug dis…

    Read article

    AI in Retail: Personalized Shopping and Inventory Management

    In the rapidly evolving retail landscape, the integration of Artificial Intelligence (AI) is revolutionizing …

    Read article

    AI in Public Safety: Predictive Policing and Crime Prevention

    In the realm of public safety, the integration of Artificial Intelligence (AI) stands as a beacon of innovati…

    Read article

    AI in Mental Health: Assisting with Therapy and Diagnostics

    In the realm of mental health, the integration of Artificial Intelligence (AI) stands as a beacon of hope and…

    Read article

    AI in Legal Compliance: Ensuring Regulatory Adherence

    In an era where technology continually reshapes the boundaries of industries, Artificial Intelligence (AI) in…

    Read article

    Need help implementing this?

    Get senior engineering support to ship it cleanly and on time.

    Get Implementation Help