Adding Breadcrumbs to a page
The Breadcrumbs component is a pretty easy one to use in Bootstrap. Let's check out the code for how to render one:
<ol class="breadcrumb"> <li><a href="#">Home</a></li> <li><a href="#">Page 1</a></li> <li class="active">Page 2</li> </ol>
As you can see, the code for this component is pretty basic, let's review it:
The Breadcrumb component uses an ordered list or
<ol>
tag as its base.Within the ordered list, you simply just need to create a list of links. The last item in the list should have a class of
.active
on it.
Adding Breadcrumbs to the Blog post page
For this example, let's actually add some Breadcrumbs to our Blog post page template. Open up blog-post.ejs
and add the following code after the container <div>
at the top:
<div class="row m-t-1"> <ol class="breadcrumb"> <li><a href="#">Home</a...