Bootstrap 4 – Responsive Web Design

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 ...