Bootstrap breadcrumbs Video Lecture - Learn Bootstrap From Basics to Building

this is part 29 of bootstrap tutorial in
this video we'll discuss bootstrap
breadcrumbs component so what are
breadcrumbs breadcrumbs indicate the
page that the user is currently on in a
navigational hierarchy of your website
breadcrumbs are very useful for websites
with large number of pages as they allow
the user to navigate to any page very
easily here is an example let's see how
to create these breadcrumbs let's flip
to visual studio at the moment what we
have got here is an ordered list with
full list items notice within each list
item we have a nested anchor element so
if we view this HTML in the browser by
default the list is rendered like this
what we want to do is convert this
ordered list to breadcrumbs as you can
see here to do that all we have to do is
on this ordered list element use the
breadcrumb class let's save our changes
and when we reload the page notice we
get the breadcrumbs as expected
let's say for example at the moment we
are on the about page that means we want
to make this about bread crumb active to
make a bread crumb active all we have to
do is on that list item use the active
class and we also don't want the current
page link to be clickable so I am also
going to remove the nested anchor
element that's present inside their
respective list item let's also remove
the closing anchor tag let's save our
changes reload the page notice now the
about link is active and it's not
clickable here is the HTML required for
that if you do not like any of the
predefined styles of these breadcrumbs
you can change them very easily at the
moment the separator for these
breadcrumbs is a forward slash now let's
say we want to change it to a pipe
instead doing that is very easy the
challenge here is to identify the CSS
class that's being used to style the
separator fortunately with the browser
developer tools it's very easy at the
moment I'm using Google Chrome so I'm
going to press f12
to launch the developer tools and then
I'm going to click on this icon which
says select an element in the page to
inspect it now what we want to do is
identify the CSS class that's being used
to style the separator that is the
forward slash so I'm going to click on
that notice what happens the moment I
click on that under Styles tab we can
see the CSS classes that are being used
to style that forward slash so we are
after this class breadcrumb Li Li before
so I'm going to copy that and then let's
go to visual studio and within our
bootstrap folder and within our CSS we
have this bootstrap dot CSS let's search
for that class so here we have bootstrap
li li before and look at the content
style here at the moment we are using a
four slash instead of that we want a
pipe symbol now we can change it here
but the downside of that is that
tomorrow if we get a newer version of
bootstrap then we are going to lose all
our customizations so let's include all
our customizations within this custom
Styles dot CSS style sheet so I'm going
to copy this class and include that
within our custom styles dot CSS and I'm
going to change only the content style
instead of using a four slash I want to
use a pipe this custom style start CSS
is already referenced within our index
dot HTML so now when we reload this page
notice the separator at the moment is a
pipe instead of a forward slash along
the same lines changing the background
color is also very easy let's say we
want to change the background color to
this color that you see here so let's
flip to the browser I'm going to click
on this icon once again and then click
on these breadcrumbs that class that's
applied is bread crumb and we want to
change this background color property so
let's flip to visual studio and then
within our bootstrap dot CSS lets copy
bread crumb claw
and paste it within our custom style
store CSS and we want to change just the
background color style so I'm going to
remove the other styles and we want to
change it to FF d800 so this is going to
give us the color that we have seen on
the slide you can of course use any
color you want so when we reload this
page notice the background color is
changed as expected
finally let's see how to change the
active page color to red as you can see
here at the moment the active page color
is gray so I'm going to click on this
icon once again and then click on about
so the class that's applied is
breadcrumb active so let's flip to
visual studio and with no approved strap
dot CSS we should see bread crumb active
let's make a copy of that class within
our custom styles dot CSS and then let's
change the color so the color that we
want is red so the color code for that
is ff0000 let's save our changes
reload our page notice now the active
page color is red as expected thank you
for listening and have a great day