Bootstrap nav component Video Lecture | Learn Bootstrap: From Basics to Building a Project - Front-End Programming

this is part 27 of bootstrap tutorial in
this video we'll discuss bootstrap nav
component bootstrap nav component makes
it very easy to create navigation
components that is navigation tabs and
pills the table here shows the list of
classes that are useful for creating
navigation tabs and pills to create
navigation tabs we use Navitus class and
to create navigation pills we use nav
per his class notice with both
navigation tabs and pills we're using
this base nav class that's because this
class contains the base markup for both
navigation tabs and pearls to create
vertically stacked navigation pills we
use nav stacked class similarly to
create justified pulse' tabs we use nav
justified to disabled disabled' class
and to make the navigation tabs a bills
active we use the active class we can
also use drop-down menu with navigation
tabs and pills let's look at a few
examples now first let's create
navigation tabs it should contain three
tabs home contact and about let's flip
to visual studio to create navigation
tabs we create an unordered list with
class set to the base nav and since we
want to create navigation tabs we also
use nav tabs class and within the
unordered list we are going to create a
list item this is going to be the first
navigation tab and we want this tab to
be active so I am also going to use the
active class basically this class tells
us the tab that we are currently on and
within the list item we are going to
create an anchor element at the moment
this href attribute is pointing to hash
symbol but it can point to any valid
page or URL within your application and
the link text is going to be home let's
create another tab by creating another
list item and we don't want this tab to
be active so we are not using class
active on this list item let's include
an anchor element as well again the href
attribute is pointing to a hash the link
text here is going to be
let's make one more copy of this list
item and here the linked text is going
to be about let's save our changes and
when we reload this page notice we get
navigation tabs home contact and about
home tab at the moment is active now if
you want navigation pills instead of
navigation tabs there's only one change
that we have to do to this HTML and that
is instead of using nav tag class we are
going to use now fills class let's save
our changes and when we reload the page
notice now we get navigation pills
instead of navigation tabs and at the
moment home pill is active now let's
discuss using icons with navigation
pills and navigation tabs as you can see
here these are glyph icons and you can
find the list of all available glyph
icons at this URL right here to get
these glyph icons I'm going to use a
span element immediately before the link
text and the class of this pan element
is going to be the name of the glyph
icon so for the home navigation pill we
want cliff icon glyph I can dash home so
this is going to display that little
home icon just before the home
navigation pill text let's do the same
thing with contact navigation pill and
about navigation pill now with contact
navigation pill we want to use a
different icon and that is glyph akin
earphone and with about it's going to be
cliff icon info sign let's your changes
and when we reload our page notice we
get icons with navigation pills is
expected now if you want icons with
navigation tabs then there is only one
simple change that we have to do to this
HTML and that is instead of using now
pills class we are going to use nav tabs
class let's see what changes and when we
reload this page notice we get
navigation tabs with icons as expected
now
let's see how to create vertically
stacked navigation pills as you can see
here to create vertically stacked
navigation pills we use nav stacked
class now we want navigation pills
instead of tabs so I'm going to change
this class to nav let's save our changes
and when we reload this page notice we
get vertically stacked navigation pills
now let's discuss creating justified
navigation pills and justifying
navigation tabs as you can see here to
create justified navigation tabs or
pills we use nav justified class let's
look at this in action let's flip to
visual studio so instead of using nav
stacked class here I'm going to use
Navitus defied class let's save our
changes and when we reload this page
notice now we get justified navigation
pills but one important thing to keep in
mind here is that as soon as the
viewport size falls below 768 pixels
look at what happens to these links they
will be stacked on top of each other
notice as soon as we fall below 768
pixels the links are stacked on top of
each other again if we cross that
barrier we get justified and navigation
pills and if you want navigation tabs
instead of navigation pills then the
change that you have to do is instead of
using now pills class use nav halves
class when we reload this page notice
now we get justified navigation tabs
let's now discuss the disabled class the
disabled class makes the navigation tabs
or pills appear disabled let's look at
this in action let's flip to visual
studio let's make this navigation tab
disabled so on this list item I'm going
to use the disabled class let's save our
changes and when we reload this page
look at the style of the contact tab
when I hover the mouse over it notice
the cursor style changes to a stop sign
indicating that this navigation tab is
disabled
one important thing to keep in mind is
that the disabled class only changes the
appearance but not the linked
functionality let me explain what I mean
by this let's actually change the HTF
attribute value of this navigation tab
instead of pointing to a hash symbol I'm
going to make this point to google.com
let's save our changes let's reload this
page now again this navigation tab
appears disabled because we are using
the disabled class and look at this when
I click on this navigation tab it still
redirects us to google.com so the link
functionality is not changed in any way
the disabled class is only going to
change the appearance of the navigation
tab or pill if you want to disable link
navigation we have to use custom
JavaScript which we will discuss in a
later video
finally let's discuss using drop-down
menu with navigation tabs and navigation
pearls as you can see here we want this
about navigation tab to include the
drop-down menu so on this list item I'm
going to use drop down class and we want
this anchor element to be of a trigger
element for the drop down menu so on
this anchor element we are going to use
drop down toggle class and we are also
going to use data - toggle attribute as
well and the value for this data -
toggle attribute is going to be drop
down and now we want this little
downward pointing arrow next to the link
text so we are going to use a span
element with class set - carat so this
is going to give us that little downward
pointing arrow and then we want to build
our drop down menu items themselves so
the drop down menu items are going to be
mission vision and products so for that
we are going to create an unordered list
and the class of this is going to be
drop-down
menu let's build our menu items so we
are going to create a list item and
within the list item we are going to
create an anchor element the href
attribute value is going to point to a
hash symbol so the link text is going to
be mission let's make two more copies of
this for the second list item the link
text is going to be vision and the final
one is going to be products let's save
all changes and when we reload this page
notice now we get a drop down menu when
I click on that in our machine vision
and products as expected let's remove
this nav justified class let's save our
changes reload the page now the tabs are
not justified and we get the drop down
menu as well as expected at the moment
we have a drop down menu with the
navigation tabs if you want navigation
pills instead instead of using nav tabs
class use now pills class and when we
reload the page we get navigation pills
and when we click on about we get the
drop down menu as well thank you for
listening and have a great day