Nav tabs and pills in Bootsrap - Mini Project: Build & Apply

Create a Bootstrap Nav Tabs and Pills Navigation

📖 Scenario: You are building a simple website navigation bar using Bootstrap. The navigation will have two styles: tabs and pills. This is common for websites to let users switch between different sections easily.

🎯 Goal: Build a Bootstrap navigation bar with two sets of navigation: one using tabs style and one using pills style. Each navigation set should have three links labeled Home, Profile, and Messages.

📋 What You'll Learn

Use Bootstrap 5 classes for nav tabs and nav pills

Create a <ul> with class nav nav-tabs for tabs navigation

Create a <ul> with class nav nav-pills for pills navigation

Each navigation list must have exactly three <li> items with links labeled 'Home', 'Profile', and 'Messages'

Use semantic HTML and include lang, charset, and viewport meta tags

Ensure the navigation is accessible with proper roles and aria attributes

💡 Why This Matters

🌍 Real World

Navigation bars with tabs and pills are common in websites and apps to organize content and improve user experience.

💼 Career

Knowing how to use Bootstrap navigation components is useful for front-end developers building responsive and accessible user interfaces.

1

Set up the basic HTML structure with Bootstrap CSS link

Create a basic HTML5 document with lang="en". Add <meta charset="UTF-8"> and <meta name="viewport" content="width=device-width, initial-scale=1"> inside the <head>. Link the Bootstrap 5 CSS from the official CDN inside the <head>. Add an empty <body> where you will add navigation later.

Bootsrap

Hint

Remember to include the Bootstrap CSS link from the official CDN inside the <head> section.

2

Add a Bootstrap nav tabs navigation bar

Inside the <body>, create an unordered list <ul> with classes nav nav-tabs. Add three list items <li> each containing a link <a> with class nav-link. The links should have the text Home, Profile, and Messages respectively. Add href="#" to each link. Mark the Home link as active by adding the class active and aria-current="page" attribute.

Bootsrap

    
    
    
    Bootstrap Nav Tabs and Pills


    

Hint

Use nav nav-tabs classes on the <ul> and add nav-link class to each <a>. Mark the Home link as active with active class and aria-current="page".

3

Add a Bootstrap nav pills navigation bar below the tabs

Below the existing nav tabs <ul>, add another unordered list <ul> with classes nav nav-pills. Add three list items <li> each containing a link <a> with class nav-link. The links should have the text Home, Profile, and Messages respectively. Add href="#" to each link. Mark the Home link as active by adding the class active and aria-current="page" attribute.

Bootsrap

    
    
    
    Bootstrap Nav Tabs and Pills


    
        
            Home
        
        
            Profile
        
        
            Messages
        
    
    

Hint

Add a second <ul> with classes nav nav-pills below the tabs. Use the same structure for list items and links. Add mt-3 class for spacing.

4

Add Bootstrap JavaScript bundle and finalize accessibility

At the end of the <body>, add the Bootstrap 5 JavaScript bundle script from the official CDN. This enables interactive features if needed. Also, ensure each <ul> has role="tablist" and each <li> has role="presentation" for accessibility. Confirm all links have href="#" and the active links have aria-current="page".

Bootsrap

    
    
    
    Bootstrap Nav Tabs and Pills


    
        
            Home
        
        
            Profile
        
        
            Messages
        
    
    
        
            Home
        
        
            Profile
        
        
            Messages
        
    
    

Hint

Add the Bootstrap JavaScript bundle script just before the closing </body> tag. Check that all accessibility roles and aria attributes are present.

Practice

1. What is the main difference between nav-tabs and nav-pills in Bootstrap navigation?

easy

A. nav-tabs requires JavaScript, nav-pills does not.

B. nav-tabs shows tabs with borders, nav-pills shows rounded pill-shaped links.

C. nav-tabs is for vertical menus, nav-pills is for horizontal menus only.

D. nav-tabs disables links, nav-pills enables links.

Solution

1. Step 1: Understand Bootstrap navigation styles

   nav-tabs creates a tab-like navigation with rectangular borders around each item.

2. Step 2: Compare with nav-pills

   nav-pills styles navigation links as rounded pills, giving a softer look.

3. Final Answer:

   nav-tabs shows tabs with borders, nav-pills shows rounded pill-shaped links. -> Option B

4. Quick Check:

   Tabs = rectangular, Pills = rounded [OK]

Hint: Tabs have edges, pills are rounded shapes [OK]

Common Mistakes:

• Thinking nav-tabs are vertical only
• Believing nav-pills don't need JS
• Confusing disabled/enabled states

2. Which of the following is the correct Bootstrap class to create a pill-style navigation list?

easy

A. <ul class='nav-tabs'>

B. <ul class='nav nav-tabs-pills'>

C. <ul class='nav nav-pills'>

D. <ul class='nav pills'>

Solution

1. Step 1: Recall Bootstrap classes for pills

   The correct class for pill navigation is nav-pills combined with nav.

2. Step 2: Check each option

   <ul class='nav nav-pills'> uses nav nav-pills, which is correct. Others have incorrect or non-existent classes.

3. Final Answer:

   <ul class='nav nav-pills'> -> Option C

4. Quick Check:

   Use nav nav-pills for pills [OK]

Hint: Use both 'nav' and 'nav-pills' classes together [OK]

Common Mistakes:

• Using only 'pills' without 'nav'
• Combining 'nav-tabs' and 'pills' incorrectly
• Misspelling class names

3. Given this Bootstrap nav tab code snippet, what will be the visual result in the browser?

<ul class='nav nav-tabs' role='tablist'>
  <li class='nav-item'>
    <a class='nav-link active' href='#home' role='tab' aria-selected='true'>Home</a>
  </li>
  <li class='nav-item'>
    <a class='nav-link' href='#profile' role='tab' aria-selected='false'>Profile</a>
  </li>
</ul>

medium

A. Two tabs labeled 'Home' and 'Profile', with 'Home' highlighted as active.

B. Two pill-shaped buttons labeled 'Home' and 'Profile', both inactive.

C. A vertical list of links with no active highlight.

D. Tabs labeled 'Home' and 'Profile' but both disabled.

Solution

1. Step 1: Analyze the classes and attributes

   The nav-tabs class creates tab style navigation. The nav-link active class highlights the 'Home' tab as active.

2. Step 2: Understand the visual effect

   'Home' tab will appear selected with a border, 'Profile' will appear as a normal tab link.

3. Final Answer:

   Two tabs labeled 'Home' and 'Profile', with 'Home' highlighted as active. -> Option A

4. Quick Check:

   Active tab is highlighted in nav-tabs [OK]

Hint: Active tab uses 'nav-link active' class [OK]

Common Mistakes:

• Confusing pills with tabs visually
• Assuming both tabs are active
• Ignoring role and aria attributes

4. Identify the error in this Bootstrap nav pills code snippet:

<ul class='nav nav-pills'>
  <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>

medium

A. The attribute data-toggle should be data-bs-toggle in Bootstrap 5+.

B. The class nav-pills is invalid and should be nav-tabs.

C. The href attributes must be full URLs, not fragment IDs.

D. The nav-item class should be on the a tags, not li.

Solution

1. Step 1: Check Bootstrap version attribute changes

   Bootstrap 5 replaced data-toggle with data-bs-toggle for JavaScript plugins.

2. Step 2: Verify other attributes and classes

   nav-pills is valid, href can use fragment IDs, and nav-item belongs on li.

3. Final Answer:

   The attribute data-toggle should be data-bs-toggle in Bootstrap 5+. -> Option A

4. Quick Check:

   Use 'data-bs-toggle' in Bootstrap 5+ [OK]

Hint: Bootstrap 5 uses 'data-bs-toggle' not 'data-toggle' [OK]

Common Mistakes:

• Using old Bootstrap 4 attributes
• Misplacing classes on wrong elements
• Thinking href must be full URL

5. You want to create a responsive Bootstrap nav with pills that switch content panels on click. Which combination of classes and attributes is correct to ensure accessibility and proper tab switching?

hard

A. <ul class='nav nav-pills'> <li class='nav-item'> <a class='nav-link' href='#home' role='tab' aria-selected='false'>Home</a> </li> </ul>

B. <ul class='nav nav-tabs' role='navigation'> <li> <a class='nav-link' href='#home'>Home</a> </li> </ul>

C. <div class='nav nav-pills'> <a class='nav-link' data-toggle='tab' href='#home'>Home</a> </div>

D. <ul class='nav nav-pills' role='tablist'> <li class='nav-item'> <a class='nav-link active' id='home-tab' data-bs-toggle='pill' href='#home' role='tab' aria-controls='home' aria-selected='true'>Home</a> </li> </ul>

Solution

1. Step 1: Identify correct classes and roles for pills navigation

   Use nav nav-pills on ul with role='tablist' for accessibility.

2. Step 2: Check anchor attributes for tab switching and accessibility

   Anchors need id, data-bs-toggle='pill', href to panel, role='tab', aria-controls, and aria-selected.

3. Step 3: Confirm active state on the selected tab

   The active tab has nav-link active and aria-selected='true'.

4. Final Answer:

   <ul class='nav nav-pills' role='tablist'> <li class='nav-item'> <a class='nav-link active' id='home-tab' data-bs-toggle='pill' href='#home' role='tab' aria-controls='home' aria-selected='true'>Home</a> </li> </ul> -> Option D

5. Quick Check:

   Use 'nav-pills' with proper roles and 'data-bs-toggle' [OK]

Hint: Use 'data-bs-toggle', roles, and aria attributes for tabs [OK]

Common Mistakes:

• Omitting role or aria attributes
• Using old 'data-toggle' instead of 'data-bs-toggle'
• Missing active class on selected tab