0
0
Bootsrapmarkup~30 mins

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

Choose your learning style9 modes available
LearnWhyDeepRenderTryChallengeProjectRecallPerf
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.
Progress0 / 4 steps
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
Need a 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
Need a 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
Need a 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
Need a hint?

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