Scribd
Upload
30 views

Lesson 8 Quick Visit To The Navigation Bar 2

The document discusses the different components and classes used to create a navigation bar (navbar) in Bootstrap. It explains that a navbar uses classes like container-fluid, collapse, and components to structure the navbar header, brand, toggle button, and links. It also covers utilities for alignment, themes for colors, and dropdowns for hierarchical navigation. The goal is to teach how to produce a responsive navigation bar for a website using Bootstrap's navbar classes and components.

Uploaded by

MUHAYYESHA AKMAD
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
30 views

Lesson 8 Quick Visit To The Navigation Bar 2

The document discusses the different components and classes used to create a navigation bar (navbar) in Bootstrap. It explains that a navbar uses classes like container-fluid, collapse, and components to structure the navbar header, brand, toggle button, and links. It also covers utilities for alignment, themes for colors, and dropdowns for hierarchical navigation. The goal is to teach how to produce a responsive navigation bar for a website using Bootstrap's navbar classes and components.

Uploaded by

MUHAYYESHA AKMAD
Copyright
© © All Rights Reserved
Available Formats
Download as PPTX, PDF, TXT or read online on Scribd
You are on page 1/ 9

QUICK VISIT

TO
THE NAVIGATION
BAR
Lesson Outcome :
Identify
Different types of navbar classes and
components

Produce
A navigation bar for your web page.

Learn
How to style a navigation bar
We have learned that
Bootstrap, with its pre-
designed classes for a
website parts and
components, has helped us
make a website easier to
set up compared to using
hard coded Web design.
NAVBAR
CLASSES Every website has a
navigation bar which is
typically place in the
header area of a website
for users to see and easily
navigate pages and
content.
WHAT IS A NAVIGATION BAR OF NAVBAR ?

NAVBARS

Navbars are responsive meta components that are enabled for users to link to any part of the website.

Navbars are specialized containers for site navigation which adjust layout based on the size and orientation of the device
viewport.

Bootstrap has a navbar component that makes navigation design easier and faster.
NAVBAR
CONTAINER
1 Uses a .container-fluid class which should be
included right behind the parent element and wrap
all the content of the website.

Navbar
Navbar Header
This wrap both

NAVBAR
Collapse
This wrap all the
navbar
2 navbar brand and
navbar toggle button

COMPONENTS 3 components
except the
then renders them
properly.
navbar header
when collapse. Navbar
Themes
Navbar 5 The colors and
themes of the
navigation bar.
Utilities
4 Includes premade classes that control
alignment and positioning of the navbar
and its components.
NAVBAR HEADER

• NAVBAR BRAND – Commonly used for the brand name, company name or project name.

• NAVBAR TOGGLE BUTTON – This applies to actions of the navigational contents of the mobile viewport which the
toggle button handles and includes the collapsing action of the navigation bar. All contents you place in your navbar, except
the navbar brand, will be hidden in the mobile view but with the toggle button displayed.
NAVBAR UTILITIES

• FIXED TO TOP – this causes the navbar to stick to the top even when we scroll down the page to the bottom and gives
user more control while interacting with the websites.

• FIXED TO BOTTOM – this makes the navbar stick to the bottom even when we scroll down the website from the top.

• COMPONENT ALIGNMENT – this tells the difference alignments of the navigational bar.
NAVBAR THEMES

• .NAVBAR-DEFAULT – white background color of the navigation bar.

• .NAVBAR-INVERSE – darker shade of the color of the navigation bar.


NAVIGATION BAR

NAVBAR DROPDOWN MARGINS


- Use to display a
- Gives proper spacing
hierarchy of topics and
in your navigational bar
sub-items.

LINKS COLORS
- Are the most visual
- Is to have organized part of the navigational
links. Links are created to bar.
redirect users to different
pages of your website

You might also like