Front-End Programming Exam > Front-End Programming Videos > Learn Bootstrap: From Basics to Building a Project > Bootstrap navbar component
Bootstrap navbar component Video Lecture - Learn Bootstrap From Basics
Text Transcript from Video
this is part 28 of bootstrap tutorial in
this video we'll discuss bootstrap
navbar component the bootstrap navbar
component is useful for creating
responsive navigation header for a
website by responsive we mean on a large
screen devices like laptops desktops etc
where we have enough room to display the
entire navbar horizontally it appears
normal as you can see here
however on small screen devices like
mobile phones portrayed tablets etc
where we don't have enough room to
display the navbar horizontally the
navbar collapses to your button like
this with three horizontal lines and
then when we click on this button that's
when the navbar expands vertically as
you can see here let's see how to create
this kind of a responsive navbar using
the bootstrap navbar component
let's now flip to visual studio so the
first thing that I'm going to do here is
create an Avila mount and set its class
to now bow because that's what we are
essentially creating here I'm also going
to use navbar default class as we want
to use the defaults of the navbar and
then inside this navbar we want to
create this toggle button so let's
create a button element let's set its
type to button the class of this is
going to be navbar Targo so this button
is the toggle button if the navbar is
not already expanded when we click on it
it's going to expand it if it's already
expanded when we click on that it's
going to collapse it so it will be the
toggle button and that's the reason why
we are setting the class to now bar
toggle we're also going to use data -
toggle attribute and the value of this
is going to be collapse and then the
next thing that we want to do is create
these three horizontal lines on this
toggle button to create those horizontal
lines we create a span element and set
its class to icon bar since we want
three horizontal lines I'm going to use
three
span elements if you want for horizontal
lines then use for span elements this
button should be inside the nav bar
header so to do that I'm going to create
a div element here and the class of this
is going to be nav bar header and then
let's move the markup of this button
element inside the nav bar header div so
this is going to make the button part of
the nav bar header the next thing that
we want to do is create this section of
the navigation bar that expands and
collapses when we click this toggle
button so to create this section I'm
going to create a development with class
set to now bar collapse and collapse and
inside this section the first thing that
we want to do is build these links home
contact about end products so to build
those links we are going to create an
unordered list and the class of this is
going to be nav and now bar nav so
inside this unordered list we are going
to create our list items with anchor
elements the href attribute is going to
be hash and the link text is going to be
home let's make three more copies of the
list item home contact about
products now we want this home
navigation item to be active so on this
list item I am also going to use active
glass so this is going to make that list
item active the next thing that we want
to do is build the search form within
the navigation bar to build the search
form we are going to create a form
element with last set to navbar form and
we want this search form to be aligned
on the left hand side of the navigation
bar so I am also going to use now bar
left class and we are using this form
for search so I'm going to set the role
of the form to search and then inside
the form we want to create this search
text box so I'm going to create a form
group by creating a development with a
class set to form group and then inside
the form group we are going to create
our text box so input type equals text
class equals form control and the
placeholder for the text box is going to
be search and then we want to create the
submit button as well so to create that
submit button let's create a button
element type equals submit class equal
let's use the default button classes BTN
and BD and default and the value on the
button is going to be sum it and the
final thing that we want to do is build
this subscribe link on the right in the
navigation bar and to create that I'm
actually going to make a copy of this
unordered list right here and then let's
paste it after the search form and then
change it accordingly now we want the
subscribe link to be aligned on the
right hand side of the navigation bar so
to do that we are going to use
bah right class as well and then we only
need one link so I'm going to delete
these three links here and change the
text here to subscribe and let's remove
this active class let's save our changes
and when we reload this page notice we
get the navigation bar at the moment we
are viewing this page on a large screen
size so the navigation bar appears
normal
let's see what happens when we reduce
the screen size notice when we fall
below 768 pixels this navigation bar
collapses to a button with three
horizontal lines when we click on this
button we expect the navigation bar to
expand vertically but notice nothing
happens when I click on this button
that's basically because we have not
linked this button with this section
that we want to expand and collapse to
link this section with this button I'm
going to use another data - attribute
and that is data - target now to link
this section I'm going to use class
selector notice on this development
they're using navbar collapse class so
let's use + selector which is dot and
then the name of the class
now bar collapse let's save our changes
reload our page notice when I click on
the button the navbar expands when I
click on it again it collapses now
instead of using a class selector like
this we can also use an ID selector but
for that we need to first include an ID
let's say the ID is main navbar and
instead of using the class selector
which is dot I'm going to use ID
selector which is hash and then the ID
of the element that we want to link in
our case s the element with ID main
navbar let's save our changes reload the
page and it should still continue to
work the same
a let's now discuss few of the classes
that are useful when creating navigation
bar
now bar inverse this class modifies the
look of the navbar by creating an
inverted variation of it let's look at
this in action in addition to the two
classes that we are using on this nav
element let's also use nav bar inverse
class let's see what changes and when we
reload this page notice we get a
different variation of the nav bar as
expected next let's discuss now bar
fixed top class this class creates nav
bar that is fixed on the top of the page
to understand the use of this class we
need some content on this page so first
let's include some content all I have
done here is created a development with
class container and inside this
development we've got some static text
let's see what changes reload our page
we should see that static text now look
at what happens to this navigation bar
as we scroll down the navigation bars
crawls up and we can't see it what we
want to do is fix the navigation bar at
the top of the page right here and
that's exactly the purpose of navbar
fix-it top class so let's use this class
on the nav element along with the other
classes that we already have so the
class is now bar fixed top let's see
what changes reload our page notice now
as we scroll down the page the now bar
is fixed at the top as expected but we
have a problem here and that is this
fixed now bar is hiding some content
behind it we have to push the content
down so we can see all of it to push the
content down all we have to do is
include some padding on the body element
so let's do that now within our index
dot HTML page notice we are already
referencing custom styles dot CSS so
within this stylesheet I'm going to
include a style for body element and we
want some padding at the top of the page
so I'm going to include padding top and
let
include 50 pixels of padding let's see
what changes reload the page now notice
the content is pushed down and we can
see all of it now let's discuss now bar
fixed bottom class as you might have
guessed by now this class is going to
create navbar that is fixed at the
bottom of the page so instead of using
now fix the top let's use now bar fixed
bottom save our changes reload the page
notice now the now bar is fixed at the
bottom of the page as we scroll all the
way down here are some content is behind
this fixed now bar at the bottom so we
have to push the content up and for that
we have to include some padding on the
body element this time it's going to be
padding at the bottom so padding bottom
50 pixels and when we reload the page
the content is now pushed up and we can
see all of it if you look at the now bar
that we have here you know there are two
problems with this first the content is
not centered within the navbar and we
also don't have enough padding for you
know the links that we have here so to
Center and pad content use either
container a container fluid classes with
this navigation bar so to use those
plazas what I'm going to do is inside
the nav element I'm going to create a
development and I'm going to set its
class to container you can also use
container fluid class and then I'm going
to take all of the navigation bar
content and then paste it inside this
development that has this class
container let's see what changes and
when we reload the page notice we get
padding and you know the links are now
centered
so to send it and pad now bar content
use container a container fluid glasses
the fixed navbar may cause some of the
page content on the top or bottom to be
invisible to push the content up or down
add padding to the top or bottom of the
body element thank you for listening and
have a great day
this video we'll discuss bootstrap
navbar component the bootstrap navbar
component is useful for creating
responsive navigation header for a
website by responsive we mean on a large
screen devices like laptops desktops etc
where we have enough room to display the
entire navbar horizontally it appears
normal as you can see here
however on small screen devices like
mobile phones portrayed tablets etc
where we don't have enough room to
display the navbar horizontally the
navbar collapses to your button like
this with three horizontal lines and
then when we click on this button that's
when the navbar expands vertically as
you can see here let's see how to create
this kind of a responsive navbar using
the bootstrap navbar component
let's now flip to visual studio so the
first thing that I'm going to do here is
create an Avila mount and set its class
to now bow because that's what we are
essentially creating here I'm also going
to use navbar default class as we want
to use the defaults of the navbar and
then inside this navbar we want to
create this toggle button so let's
create a button element let's set its
type to button the class of this is
going to be navbar Targo so this button
is the toggle button if the navbar is
not already expanded when we click on it
it's going to expand it if it's already
expanded when we click on that it's
going to collapse it so it will be the
toggle button and that's the reason why
we are setting the class to now bar
toggle we're also going to use data -
toggle attribute and the value of this
is going to be collapse and then the
next thing that we want to do is create
these three horizontal lines on this
toggle button to create those horizontal
lines we create a span element and set
its class to icon bar since we want
three horizontal lines I'm going to use
three
span elements if you want for horizontal
lines then use for span elements this
button should be inside the nav bar
header so to do that I'm going to create
a div element here and the class of this
is going to be nav bar header and then
let's move the markup of this button
element inside the nav bar header div so
this is going to make the button part of
the nav bar header the next thing that
we want to do is create this section of
the navigation bar that expands and
collapses when we click this toggle
button so to create this section I'm
going to create a development with class
set to now bar collapse and collapse and
inside this section the first thing that
we want to do is build these links home
contact about end products so to build
those links we are going to create an
unordered list and the class of this is
going to be nav and now bar nav so
inside this unordered list we are going
to create our list items with anchor
elements the href attribute is going to
be hash and the link text is going to be
home let's make three more copies of the
list item home contact about
products now we want this home
navigation item to be active so on this
list item I am also going to use active
glass so this is going to make that list
item active the next thing that we want
to do is build the search form within
the navigation bar to build the search
form we are going to create a form
element with last set to navbar form and
we want this search form to be aligned
on the left hand side of the navigation
bar so I am also going to use now bar
left class and we are using this form
for search so I'm going to set the role
of the form to search and then inside
the form we want to create this search
text box so I'm going to create a form
group by creating a development with a
class set to form group and then inside
the form group we are going to create
our text box so input type equals text
class equals form control and the
placeholder for the text box is going to
be search and then we want to create the
submit button as well so to create that
submit button let's create a button
element type equals submit class equal
let's use the default button classes BTN
and BD and default and the value on the
button is going to be sum it and the
final thing that we want to do is build
this subscribe link on the right in the
navigation bar and to create that I'm
actually going to make a copy of this
unordered list right here and then let's
paste it after the search form and then
change it accordingly now we want the
subscribe link to be aligned on the
right hand side of the navigation bar so
to do that we are going to use
bah right class as well and then we only
need one link so I'm going to delete
these three links here and change the
text here to subscribe and let's remove
this active class let's save our changes
and when we reload this page notice we
get the navigation bar at the moment we
are viewing this page on a large screen
size so the navigation bar appears
normal
let's see what happens when we reduce
the screen size notice when we fall
below 768 pixels this navigation bar
collapses to a button with three
horizontal lines when we click on this
button we expect the navigation bar to
expand vertically but notice nothing
happens when I click on this button
that's basically because we have not
linked this button with this section
that we want to expand and collapse to
link this section with this button I'm
going to use another data - attribute
and that is data - target now to link
this section I'm going to use class
selector notice on this development
they're using navbar collapse class so
let's use + selector which is dot and
then the name of the class
now bar collapse let's save our changes
reload our page notice when I click on
the button the navbar expands when I
click on it again it collapses now
instead of using a class selector like
this we can also use an ID selector but
for that we need to first include an ID
let's say the ID is main navbar and
instead of using the class selector
which is dot I'm going to use ID
selector which is hash and then the ID
of the element that we want to link in
our case s the element with ID main
navbar let's save our changes reload the
page and it should still continue to
work the same
a let's now discuss few of the classes
that are useful when creating navigation
bar
now bar inverse this class modifies the
look of the navbar by creating an
inverted variation of it let's look at
this in action in addition to the two
classes that we are using on this nav
element let's also use nav bar inverse
class let's see what changes and when we
reload this page notice we get a
different variation of the nav bar as
expected next let's discuss now bar
fixed top class this class creates nav
bar that is fixed on the top of the page
to understand the use of this class we
need some content on this page so first
let's include some content all I have
done here is created a development with
class container and inside this
development we've got some static text
let's see what changes reload our page
we should see that static text now look
at what happens to this navigation bar
as we scroll down the navigation bars
crawls up and we can't see it what we
want to do is fix the navigation bar at
the top of the page right here and
that's exactly the purpose of navbar
fix-it top class so let's use this class
on the nav element along with the other
classes that we already have so the
class is now bar fixed top let's see
what changes reload our page notice now
as we scroll down the page the now bar
is fixed at the top as expected but we
have a problem here and that is this
fixed now bar is hiding some content
behind it we have to push the content
down so we can see all of it to push the
content down all we have to do is
include some padding on the body element
so let's do that now within our index
dot HTML page notice we are already
referencing custom styles dot CSS so
within this stylesheet I'm going to
include a style for body element and we
want some padding at the top of the page
so I'm going to include padding top and
let
include 50 pixels of padding let's see
what changes reload the page now notice
the content is pushed down and we can
see all of it now let's discuss now bar
fixed bottom class as you might have
guessed by now this class is going to
create navbar that is fixed at the
bottom of the page so instead of using
now fix the top let's use now bar fixed
bottom save our changes reload the page
notice now the now bar is fixed at the
bottom of the page as we scroll all the
way down here are some content is behind
this fixed now bar at the bottom so we
have to push the content up and for that
we have to include some padding on the
body element this time it's going to be
padding at the bottom so padding bottom
50 pixels and when we reload the page
the content is now pushed up and we can
see all of it if you look at the now bar
that we have here you know there are two
problems with this first the content is
not centered within the navbar and we
also don't have enough padding for you
know the links that we have here so to
Center and pad content use either
container a container fluid classes with
this navigation bar so to use those
plazas what I'm going to do is inside
the nav element I'm going to create a
development and I'm going to set its
class to container you can also use
container fluid class and then I'm going
to take all of the navigation bar
content and then paste it inside this
development that has this class
container let's see what changes and
when we reload the page notice we get
padding and you know the links are now
centered
so to send it and pad now bar content
use container a container fluid glasses
the fixed navbar may cause some of the
page content on the top or bottom to be
invisible to push the content up or down
add padding to the top or bottom of the
body element thank you for listening and
have a great day
About this Video
4.89/5 Rating
Apr 29, 2026 Last updated
Related Exams
Video Description: Bootstrap navbar component for Front-End Programming 2026 is part of Learn Bootstrap: From Basics to Building a Project preparation. The notes and questions for Bootstrap navbar component have been prepared according to the Front-End Programming exam syllabus. Information about Bootstrap navbar component covers all important topics for Front-End Programming 2026 Exam. Find important definitions, questions, notes, meanings, examples, exercises and tests below for Bootstrap navbar component.
Introduction of Bootstrap navbar component in English is available as part of our Learn Bootstrap: From Basics to Building a Project for Front-End Programming & Bootstrap navbar component in Hindi for Learn Bootstrap: From Basics to Building a Project course. Download more important topics related with notes, lectures and mock test series for Front-End Programming Exam by signing up for free.
Description
Video: Bootstrap navbar component of Learn Bootstrap have been curated by the Front-End Programming experts, helping you revise the topic quickly for exam preparation. Watch on EduRev.
Information about Bootstrap navbar component
Here you can find the meaning of Bootstrap navbar component defined & explained in the simplest way possible. Besides explaining types of Bootstrap navbar component theory, EduRev gives you an ample number of questions to practice Bootstrap navbar component tests, examples and also practice Front-End Programming tests.
Related Searches
Viva Questions, mock tests for examination, Bootstrap navbar component, Bootstrap navbar component, Extra Questions, practice quizzes, past year papers, Summary, video lectures, Exam, pdf , ppt, study material, Previous Year Questions with Solutions, Semester Notes, Important questions, MCQs, Sample Paper, Bootstrap navbar component, shortcuts and tricks, Objective type Questions, Free;