Navbar color schemes in Bootsrap - Mini Project: Build & Apply

Navbar Color Schemes with Bootstrap

📖 Scenario: You are building a website header that includes a navigation bar. You want to practice changing the color scheme of the navbar using Bootstrap classes.

🎯 Goal: Create a simple Bootstrap navbar and change its color scheme by applying different Bootstrap navbar color classes.

📋 What You'll Learn

Use Bootstrap 5 classes to create a responsive navbar

Apply the navbar-light and bg-light classes for a light color scheme

Apply the navbar-dark and bg-dark classes for a dark color scheme

Include a brand name inside the navbar

Ensure the navbar is responsive and accessible

💡 Why This Matters

🌍 Real World

Navigation bars are essential for websites to help users move between pages easily. Changing color schemes helps match the website's style and improves user experience.

💼 Career

Web developers often use Bootstrap to quickly build responsive and accessible navigation bars that look good on all devices.

1

Create a basic Bootstrap navbar

Write the HTML code to create a Bootstrap navbar with a nav element that has the classes navbar and navbar-expand-lg. Inside it, add a a element with the classes navbar-brand and the text MySite.

Bootsrap

  MySite
  

Need a hint?

Use a nav element with classes navbar and navbar-expand-lg. Add a brand link with class navbar-brand and text MySite.

2

Add a light color scheme to the navbar

Add the Bootstrap classes navbar-light and bg-light to the nav element to give the navbar a light color scheme.

Bootsrap

  MySite
  

Need a hint?

Add navbar-light and bg-light classes inside the nav element's class attribute.

3

Change the navbar to a dark color scheme

Replace the navbar-light and bg-light classes on the nav element with navbar-dark and bg-dark to switch the navbar to a dark color scheme.

Bootsrap

  MySite
  

Need a hint?

Remove navbar-light and bg-light and add navbar-dark and bg-dark classes instead.

4

Make the navbar responsive and accessible

Add a button element with classes navbar-toggler and attributes 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. Then add a div with classes collapse navbar-collapse and id navbarNav. Inside this div, add an unordered list ul with class navbar-nav and one list item li with class nav-item containing a link a with class nav-link and text Home.

Bootsrap

  MySite
  

Need a hint?

Add a toggle button with the correct Bootstrap classes and ARIA attributes for accessibility. Add a collapsible div with a navigation list inside.