Bootsrapmarkup~30 mins

Navbar basics in Bootsrap - Mini Project: Build & Apply

Choose your learning style9 modes available

Learn Why Deep Render Try Challenge Project Recall Perf

Navbar basics

📖 Scenario: You are building a simple website header with a navigation bar. This navbar will help users move between different pages easily.

🎯 Goal: Create a basic responsive navigation bar using Bootstrap 5. The navbar should have a brand name and three links: Home, About, and Contact.

📋 What You'll Learn

Use Bootstrap 5 classes to create the navbar

Include a brand name on the left side

Add three navigation links: Home, About, Contact

Make the navbar responsive with a toggle button on small screens

Use semantic HTML and accessible attributes

💡 Why This Matters

🌍 Real World

Navigation bars are essential for websites to help users find pages easily. Bootstrap makes it simple to create responsive and accessible navbars.

💼 Career

Knowing how to build and customize navbars is a common skill required for front-end web development jobs.

Progress0 / 4 steps

Create the basic HTML structure for the navbar

Write the HTML skeleton for a Bootstrap navbar. Create a <nav> element with classes navbar and navbar-expand-lg. Inside it, add a <div> with class container-fluid. Inside this container, add a brand link with class navbar-brand and text MySite.

Bootsrap

Need a hint?

Use the <a> tag with class navbar-brand inside the container.

Add the navbar toggler button for small screens

Inside the container-fluid div, after the brand link, add a button with class navbar-toggler. Set type="button", data-bs-toggle="collapse", data-bs-target="#navbarNav", aria-controls="navbarNav", aria-expanded="false", and aria-label="Toggle navigation". Inside the button, add a <span> with class navbar-toggler-icon.

Bootsrap


  
    MySite

Need a hint?

The toggler button uses data-bs-toggle="collapse" and targets #navbarNav.

Add the collapsible navigation links

After the toggler button, add a <div> with classes collapse navbar-collapse and id navbarNav. Inside it, add an unordered list <ul> with class navbar-nav. Inside the list, add three list items <li> with class nav-item. Each list item should contain a link <a> with class nav-link and href #. The links text should be Home, About, and Contact respectively.

Bootsrap


  
    MySite

Need a hint?

Wrap the links inside a div with collapse navbar-collapse and id navbarNav.

Add accessibility and responsive meta tag

Add the <meta> tag for viewport inside the <head> section: <meta name="viewport" content="width=device-width, initial-scale=1">. Also, add aria-current="page" attribute to the Home link to indicate the current page.

Bootsrap

-->

Need a hint?

The viewport meta tag helps the navbar be responsive on mobile devices. The aria-current="page" attribute marks the active link for screen readers.