Demo Mode

Lesson 11 of 14

Concept 11: Bootstrap Navigation Bar

:dart: Learning Objectives

By the end of this lesson, you will be able to:

Create a responsive navigation bar using Bootstrap
Understand how navbars collapse on mobile devices
Customize navbar colors and styles
Add brand logos and navigation links to your navbar

:information_source: What is a Bootstrap Navigation Bar? A Bootstrap navigation bar (navbar) is a ready-made component that creates a navigation header at the top of your webpage. It helps visitors easily move between different pages of your website!

:iphone: Key Features of Bootstrap Navbars

Also known as: Navigation bars are often called navbars for short
Responsive behavior: The navbar can extend or collapse based on screen size
Mobile-friendly: On small devices (phones and tablets), the navbar collapses into a hamburger menu. Click the toggle button to see all links!
Desktop view: On larger screens (laptops and desktops), the navbar displays horizontally
Full-width default: Navbars are fluid by default - they stretch across the entire screen. Use the "container" class to limit the width

To build a complete navbar, you'll use these building blocks:

.navbar-brand - Shows your website name or logo
.navbar-nav - Contains your navigation links
.navbar-toggler - The hamburger menu button for mobile
.collapse - Hides/shows content on small screens
.navbar-collapse - Wraps collapsible navigation items
.toggler-icon - The three-line icon inside the toggle button

An example of the Bootstrap navigation bar

:rocket: Quick Start Example

Creating a Bootstrap navbar is easy! Just copy the code from the Bootstrap Cheat Sheet and customize it:

:bulb: Tip Start with a working example, then modify it to match your needs!

Example:

HTML Input:

html

<nav class="navbar navbar-expand-md navbar-light bg-warning">
   <a href="index.html" class="navbar-brand">Telebort</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="about.html" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="contact.html" class="nav-link">Contact Us</a>
        </li>
        <li class="nav-item">
          <a href="faq.html" class="nav-link">FAQ</a>
        </li>
      </ul>
   </div>
</nav>

Output:

When screen viewport size ``is >=768``px: Horizontal navigation bar with "Telebort" brand on left and "About | Contact Us | FAQ" links on right
When screen viewport size ``is <768``px: Collapsed navigation with hamburger menu button that expands to show navigation links when clicked

:art: What You'll Need to Know

To customize your navbar, you'll learn about:

Basic structure - How navbar pieces fit together
Responsiveness - Making it work on all screen sizes
Color schemes - Styling your navbar to match your design

You need the .navbar class to create a Bootstrap navigation bar
Add this class to the <nav> HTML element
The <nav> element tells browsers "this is a navigation section!"

:memo: Note The <nav> element is semantic HTML - it helps search engines and screen readers understand your page structure!

Example:

HTML Input:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar Demo</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="navbar">Telebort</nav>
    <script src="jQuery.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Output:


Telebort

(A simple text "Telebort" displayed without any styling)

This navbar isn't complete yet - we need to add more components!

The .navbar-brand class displays your website's name or logo
Put this class in an <a> element so visitors can click it to go home
Think of it as your website's "name tag"!

Example:

HTML Input:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar Demo</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="navbar">
      <a href="index.html" class="navbar-brand">Telebort</a>
    </nav>
    <script src="jQuery.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Output:

bash


Telebort  (styled as a clickable brand link)

The .navbar-nav class creates a container for your navigation links
Links display vertically by default (Bootstrap is mobile-first!)
You'll need three components working together:

3 Simple Steps to Add Navigation Links:

Add .navbar-nav to a <ul> element
Add .nav-item to each <li> element
Add .nav-link to each <a> element inside

:bulb: Tip Remember: UL -> LI -> A (Unordered List -> List Item -> Anchor/Link)

Let's see it in action:

Example:

HTML Input:

html

<body>
   <nav class="navbar">
     <a href="index.html" class="navbar-brand">Telebort</a>
     <ul class="navbar-nav">
       <li class="nav-item">
         <a href="about.html" class="nav-link">About</a>
       </li>
       <li class="nav-item">
         <a href="contact.html" class="nav-link">Contact Us</a>
       </li>
       <li class="nav-item">
         <a href="faq.html" class="nav-link">FAQ</a>
       </li>
     </ul>
   </nav>
   <script src="jQuery.js"></script>
   <script src="js/bootstrap.js"></script>
 </body>

Output:


Telebort
About
Contact Us
FAQ

(Brand and navigation links displayed vertically)

:memo: Note Your navigation links stay vertical until you add a special "expand" class. Keep reading to learn how!

Add .navbar-expand-{size} to make your navbar responsive
Replace {size} with: sm, md, lg, or xl
Example: .navbar-expand-md means "expand horizontally on medium screens and up"

How it works:

Below the size you choose -> Navbar stays vertical
At or above the size -> Navbar becomes horizontal

Example:

HTML Input:

html

<body>
   <nav class="navbar navbar-expand-md">
     <a href="index.html" class="navbar-brand">Telebort</a>
     <ul class="navbar-nav">
       <li class="nav-item">
         <a href="about.html" class="nav-link">About</a>
       </li>
       <li class="nav-item">
         <a href="contact.html" class="nav-link">Contact Us</a>
       </li>
       <li class="nav-item">
         <a href="faq.html" class="nav-link">FAQ</a>
       </li>
     </ul>
   </nav>
   <script src="jQuery.js"></script>
   <script src="js/bootstrap.js"></script>
 </body>

Output:

When screen viewport size ``is >=768``px: Telebort About | Contact Us | FAQ (horizontal layout)
When screen viewport size ``is <768``px:
```
Telebort
About
Contact Us
FAQ
```
(vertical layout)

Want to turn your navbar into a hamburger menu on mobile? You'll need these classes:

.navbar-toggler - Creates the hamburger button
.collapse and .navbar-collapse - Hide/show the menu items

3 Steps to Create a Collapsible Navbar:

Add a button with:
- class="navbar-toggler"
- data-toggle="collapse"
- data-target="#collapsibleNavbar"
Wrap your navigation links in a <div> with:
- class="collapse navbar-collapse"
- id="collapsibleNavbar" (must match the data-target!)
Add the hamburger icon inside the button:
- <span class="navbar-toggler-icon"></span>

Example:

HTML Input:

html

<nav class="navbar navbar-expand-md">
   <a href="index.html" class="navbar-brand">Telebort</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="about.html" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="contact.html" class="nav-link">Contact Us</a>
        </li>
        <li class="nav-item">
          <a href="faq.html" class="nav-link">FAQ</a>
        </li>
      </ul>
   </div>
</nav>

Output:

When screen viewport size ``is >=768``px: Telebort About | Contact Us | FAQ (horizontal layout with all links visible)
When screen viewport size ``is <768``px: Telebort [☰] (with hamburger menu button; links appear when button is clicked)

:warning: Warning Can't see the hamburger icon? It might be the same color as your background! Let's fix that with color schemes.

Bootstrap makes it easy to style your navbar with two theme classes:

Choose Your Theme:

.navbar-light - Use with light backgrounds (text becomes dark)
.navbar-dark - Use with dark backgrounds (text becomes light)

Add Background Colors:

Use .bg-* classes to set any background color
Examples: .bg-primary, .bg-warning, .bg-info, .bg-success

:bulb: Tip Match your theme to your background! Light theme for light colors, dark theme for dark colors.

Example:

HTML Input:

html

<nav class="navbar navbar-expand-md navbar-light bg-warning">
   <a href="index.html" class="navbar-brand">Telebort</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="about.html" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="contact.html" class="nav-link">Contact Us</a>
        </li>
        <li class="nav-item">
          <a href="faq.html" class="nav-link">FAQ</a>
        </li>
      </ul>
   </div>
</nav>

Output:

When screen viewport size ``is >=768``px: Yellow background navbar with Telebort brand and About | Contact Us | FAQ links in dark text
When screen viewport size ``is <768``px: Yellow background navbar with Telebort brand and visible hamburger menu [☰] button

:memo: Note Success! The hamburger icon is now visible because we used .navbar-light with .bg-warning - the light theme gives us a dark icon that shows up on the yellow background!

:memo: Summary

You've learned how to create a responsive Bootstrap navigation bar! Here's what you can do now:

:white_check_mark: Create a basic navbar using .navbar class
:white_check_mark: Add your brand with .navbar-brand
:white_check_mark: Include navigation links using .navbar-nav, .nav-item, and .nav-link
:white_check_mark: Make it responsive with .navbar-expand-{size}
:white_check_mark: Add a mobile menu using .navbar-toggler and .collapse
:white_check_mark: Style with colors using .navbar-light/.navbar-dark and .bg-*

:movie_camera: Video Tutorial

Bootstrap Navigation Bar (Part 1) Video Tutorial

Bootstrap Navigation Bar (Part 2) Video Tutorial

:emoji: AI Prompt

Code with AI: Customize Bootstrap components.

Prompts:

"Bootstrap code for a navigation bar with a dark background and white text."
"Bootstrap code for a carousel that automatically advances slides."

:rocket: Practice Time!

Ready to build your own navbar? Try these challenges:

Beginner Challenge

Create a simple navbar with:

Your name as the brand
Three navigation links: Home, About, Contact
Light blue background color

Intermediate Challenge

Build a responsive navbar that:

Collapses on mobile devices
Has a dark theme with white text
Includes 5 navigation links

Advanced Challenge

Design a navbar with:

A logo image in the brand area
Dropdown menus for some links
Custom colors matching your favorite website

:bulb: Tip Start with the basic example from this lesson and modify it step by step. Test on different screen sizes to see how it responds!

Lesson 11 of 14

Concept 11: Bootstrap Navigation Bar

:dart: Learning Objectives

By the end of this lesson, you will be able to:

Create a responsive navigation bar using Bootstrap
Understand how navbars collapse on mobile devices
Customize navbar colors and styles
Add brand logos and navigation links to your navbar

:information_source: What is a Bootstrap Navigation Bar? A Bootstrap navigation bar (navbar) is a ready-made component that creates a navigation header at the top of your webpage. It helps visitors easily move between different pages of your website!

:iphone: Key Features of Bootstrap Navbars

Also known as: Navigation bars are often called navbars for short
Responsive behavior: The navbar can extend or collapse based on screen size
Mobile-friendly: On small devices (phones and tablets), the navbar collapses into a hamburger menu. Click the toggle button to see all links!
Desktop view: On larger screens (laptops and desktops), the navbar displays horizontally
Full-width default: Navbars are fluid by default - they stretch across the entire screen. Use the "container" class to limit the width

To build a complete navbar, you'll use these building blocks:

.navbar-brand - Shows your website name or logo
.navbar-nav - Contains your navigation links
.navbar-toggler - The hamburger menu button for mobile
.collapse - Hides/shows content on small screens
.navbar-collapse - Wraps collapsible navigation items
.toggler-icon - The three-line icon inside the toggle button

An example of the Bootstrap navigation bar

:rocket: Quick Start Example

Creating a Bootstrap navbar is easy! Just copy the code from the Bootstrap Cheat Sheet and customize it:

:bulb: Tip Start with a working example, then modify it to match your needs!

Example:

HTML Input:

html

<nav class="navbar navbar-expand-md navbar-light bg-warning">
   <a href="index.html" class="navbar-brand">Telebort</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="about.html" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="contact.html" class="nav-link">Contact Us</a>
        </li>
        <li class="nav-item">
          <a href="faq.html" class="nav-link">FAQ</a>
        </li>
      </ul>
   </div>
</nav>

Output:

When screen viewport size ``is >=768``px: Horizontal navigation bar with "Telebort" brand on left and "About | Contact Us | FAQ" links on right
When screen viewport size ``is <768``px: Collapsed navigation with hamburger menu button that expands to show navigation links when clicked

:art: What You'll Need to Know

To customize your navbar, you'll learn about:

Basic structure - How navbar pieces fit together
Responsiveness - Making it work on all screen sizes
Color schemes - Styling your navbar to match your design

You need the .navbar class to create a Bootstrap navigation bar
Add this class to the <nav> HTML element
The <nav> element tells browsers "this is a navigation section!"

:memo: Note The <nav> element is semantic HTML - it helps search engines and screen readers understand your page structure!

Example:

HTML Input:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar Demo</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="navbar">Telebort</nav>
    <script src="jQuery.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Output:


Telebort

(A simple text "Telebort" displayed without any styling)

This navbar isn't complete yet - we need to add more components!

The .navbar-brand class displays your website's name or logo
Put this class in an <a> element so visitors can click it to go home
Think of it as your website's "name tag"!

Example:

HTML Input:

html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Navbar Demo</title>
    <link rel="stylesheet" href="css/bootstrap.css" />
    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <nav class="navbar">
      <a href="index.html" class="navbar-brand">Telebort</a>
    </nav>
    <script src="jQuery.js"></script>
    <script src="js/bootstrap.js"></script>
  </body>
</html>

Output:

bash


Telebort  (styled as a clickable brand link)

The .navbar-nav class creates a container for your navigation links
Links display vertically by default (Bootstrap is mobile-first!)
You'll need three components working together:

3 Simple Steps to Add Navigation Links:

Add .navbar-nav to a <ul> element
Add .nav-item to each <li> element
Add .nav-link to each <a> element inside

:bulb: Tip Remember: UL -> LI -> A (Unordered List -> List Item -> Anchor/Link)

Let's see it in action:

Example:

HTML Input:

html

<body>
   <nav class="navbar">
     <a href="index.html" class="navbar-brand">Telebort</a>
     <ul class="navbar-nav">
       <li class="nav-item">
         <a href="about.html" class="nav-link">About</a>
       </li>
       <li class="nav-item">
         <a href="contact.html" class="nav-link">Contact Us</a>
       </li>
       <li class="nav-item">
         <a href="faq.html" class="nav-link">FAQ</a>
       </li>
     </ul>
   </nav>
   <script src="jQuery.js"></script>
   <script src="js/bootstrap.js"></script>
 </body>

Output:


Telebort
About
Contact Us
FAQ

(Brand and navigation links displayed vertically)

:memo: Note Your navigation links stay vertical until you add a special "expand" class. Keep reading to learn how!

Add .navbar-expand-{size} to make your navbar responsive
Replace {size} with: sm, md, lg, or xl
Example: .navbar-expand-md means "expand horizontally on medium screens and up"

How it works:

Below the size you choose -> Navbar stays vertical
At or above the size -> Navbar becomes horizontal

Example:

HTML Input:

html

<body>
   <nav class="navbar navbar-expand-md">
     <a href="index.html" class="navbar-brand">Telebort</a>
     <ul class="navbar-nav">
       <li class="nav-item">
         <a href="about.html" class="nav-link">About</a>
       </li>
       <li class="nav-item">
         <a href="contact.html" class="nav-link">Contact Us</a>
       </li>
       <li class="nav-item">
         <a href="faq.html" class="nav-link">FAQ</a>
       </li>
     </ul>
   </nav>
   <script src="jQuery.js"></script>
   <script src="js/bootstrap.js"></script>
 </body>

Output:

When screen viewport size ``is >=768``px: Telebort About | Contact Us | FAQ (horizontal layout)
When screen viewport size ``is <768``px:
```
Telebort
About
Contact Us
FAQ
```
(vertical layout)

Want to turn your navbar into a hamburger menu on mobile? You'll need these classes:

.navbar-toggler - Creates the hamburger button
.collapse and .navbar-collapse - Hide/show the menu items

3 Steps to Create a Collapsible Navbar:

Add a button with:
- class="navbar-toggler"
- data-toggle="collapse"
- data-target="#collapsibleNavbar"
Wrap your navigation links in a <div> with:
- class="collapse navbar-collapse"
- id="collapsibleNavbar" (must match the data-target!)
Add the hamburger icon inside the button:
- <span class="navbar-toggler-icon"></span>

Example:

HTML Input:

html

<nav class="navbar navbar-expand-md">
   <a href="index.html" class="navbar-brand">Telebort</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="about.html" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="contact.html" class="nav-link">Contact Us</a>
        </li>
        <li class="nav-item">
          <a href="faq.html" class="nav-link">FAQ</a>
        </li>
      </ul>
   </div>
</nav>

Output:

When screen viewport size ``is >=768``px: Telebort About | Contact Us | FAQ (horizontal layout with all links visible)
When screen viewport size ``is <768``px: Telebort [☰] (with hamburger menu button; links appear when button is clicked)

:warning: Warning Can't see the hamburger icon? It might be the same color as your background! Let's fix that with color schemes.

Bootstrap makes it easy to style your navbar with two theme classes:

Choose Your Theme:

.navbar-light - Use with light backgrounds (text becomes dark)
.navbar-dark - Use with dark backgrounds (text becomes light)

Add Background Colors:

Use .bg-* classes to set any background color
Examples: .bg-primary, .bg-warning, .bg-info, .bg-success

:bulb: Tip Match your theme to your background! Light theme for light colors, dark theme for dark colors.

Example:

HTML Input:

html

<nav class="navbar navbar-expand-md navbar-light bg-warning">
   <a href="index.html" class="navbar-brand">Telebort</a>
   <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
        <span class="navbar-toggler-icon"></span>
   </button>
   <div class="collapse navbar-collapse" id="collapsibleNavbar">
      <ul class="navbar-nav">
        <li class="nav-item">
          <a href="about.html" class="nav-link">About</a>
        </li>
        <li class="nav-item">
          <a href="contact.html" class="nav-link">Contact Us</a>
        </li>
        <li class="nav-item">
          <a href="faq.html" class="nav-link">FAQ</a>
        </li>
      </ul>
   </div>
</nav>

Output:

When screen viewport size ``is >=768``px: Yellow background navbar with Telebort brand and About | Contact Us | FAQ links in dark text
When screen viewport size ``is <768``px: Yellow background navbar with Telebort brand and visible hamburger menu [☰] button

:memo: Note Success! The hamburger icon is now visible because we used .navbar-light with .bg-warning - the light theme gives us a dark icon that shows up on the yellow background!