Code360 powered by Coding Ninjas X Naukri.com. Code360 powered by Coding Ninjas X Naukri.com
Table of contents
1.
Introduction
2.
What is Breadcrumb?
2.1.
Example
2.1.1.
Code
2.1.2.
Output
3.
Bootstrap
4.
Bootstrap Breadcrumb Classes
4.1.
Root Page
4.1.1.
Code
4.1.2.
Output
4.2.
Child Page
4.2.1.
Code
4.2.2.
Output
4.3.
Child of Child Page
4.3.1.
Code
4.3.2.
Output
5.
Dividers in Bootstrap Breadcrumb
5.1.
Code
5.2.
Output
6.
Breadcrumb Styling
6.1.
Code
6.2.
Output
7.
Frequently Asked Questions
7.1.
What are the advantages of using Bootstrap?
7.2.
What is the purpose of Breadcrumbs?
7.3.
Can we change the presentation of navigation in breadcrumbs?
7.4.
What is the difference between CSS and Bootstrap?
7.5.
What is the role of active class in Breadcrumbs?
8.
Conclusion
Last Updated: Mar 27, 2024
Easy

Bootstrap - Breadcrumb

Master Python: Predicting weather forecasts
Speaker
Ashwin Goyal
Product Manager @

Introduction

Hello Ninjas! You must have used Bootstrap before. We use bootstrap for ease as it reduces time by providing pre-designed and pre-styled components. In this tutorial, we will look at what Breadcrumb is and how we can use Breadcrumb in Bootstrap.

Bootstrap - Breadcrumb

Let's dive into our topic and understand breadcrumb in bootstrap.

Also See,  javascript replace

What is Breadcrumb?

A breadcrumb is a navigation element used to signify the user's current location within a website or an application. It shows the hierarchical order representing the links from the root of a website to the current page.
 

To experience breadcrumb, scroll up a bit, and you will find the breadcrumb for this page before the beginning of this article.

What is Breadcrumb?

Before looking at Breadcrumb in bootstrap, let’s first see how we can create breadcrumbs using simple HTML and CSS using an example.

Example

We have to use an unordered list to create a basic breadcrumb on a webpage. The styling of the list is done to ensure the items are aligned at the center. The li elements except the last one are given a '>' character. The following is the code for the same.

Code

<!DOCTYPE html>
<html lang="en">

<head>
	<title>Breadcrumb example</title>
	<style>
		nav {
			background-color: #303443;
			padding: 10px;
		}
		ul {
			list-style: none;
			display: flex;
			align-items: center;
		}
		li, a {
			color: rgb(255, 255, 255);
			text-decoration: none;
		}
		li:not(:last-child):after {
			content: " > ";
			margin: 0 10px;
		}
		.active {
			font-weight: bold;
			color: rgb(180, 180, 180);
			text-decoration: underline;
		}
	</style>
</head>

<body>
	<nav>
		<ul>
			<li><a href="#">Home</a></li>
			<li><a href="#">Courses</a></li>
			<li><a href="#" class="active" >DSA</a></li>
		</ul>
	</nav>
</body>

</html>

Output

Output
Get the tech career you deserve, faster!
Connect with our expert counsellors to understand how to hack your way to success
User rating 4.7/5
1:1 doubt support
95% placement record
Akash Pal
Senior Software Engineer
326% Hike After Job Bootcamp
Himanshu Gusain
Programmer Analyst
32 LPA After Job Bootcamp
After Job
Bootcamp

Bootstrap

Bootstrap is a front-end development framework which is used to develop the front-end of the webpage using the pre-styled components. It is used to create attractive web pages with responsiveness. It provides a large number of features to create user-friendly websites.

Bootstrap

Bootstrap provides a breadcrumb class to style the breadcrumbs. Let's discuss it in detail with the help of an example.

Bootstrap Breadcrumb Classes

Breadcrumbs in bootstrap can be created by simply using an unordered list and applying the breadcrumb class to it and the breadcrumb-item to the list items. The breadcrumb is a bootstrap class which defines the content inside it to behave in a breadcrumb manner. In short, the items inside this class will arrange themselves in navigation order.

Let's see a simple example of the steps of moving on a website.

Root Page

Suppose a user has visited the root page; the classes breadcrumb-item and active will be applied to it. The active class stands for the current page on which the user is, and because of this, there is no anchor tag following it because it does not need redirection.

Code

<nav>
	<ul class="breadcrumb">
		<li class="breadcrumb-item active">Coding Ninjas Studio</li>
	</ul>
</nav>

Output

Output

Child Page

If the user visits the child of the root page, the root page will have the class breadcrumb-item with them, and the page on which the user is currently there has the classes breadcrumb-item and active associated with it. The breadcrumb-item is written for the visited pages, and the anchor tag corresponding to them redirects to that page.

Code

<nav>
	<ul class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">Coding Ninjas Studio</a></li>
		<li class="breadcrumb-item active">Library</li>
	</ul>
</nav>

Output

Output

Child of Child Page

Suppose the user visits any child of the child page; the earlier pages will have the class breadcrumb-item, and the current page will have the classes breadcrumb-item and active associated with it.

Code

<nav>
	<ul class="breadcrumb">
		<li class="breadcrumb-item"><a href="#">Coding Ninjas Studio</a></li>
		<li class="breadcrumb-item"><a href="#">Library</a></li>
		<li class="breadcrumb-item active">Web Technologies</li>
	</ul>
</nav>

Output

Output

Dividers in Bootstrap Breadcrumb

As we have seen above, pages are represented by a '/' between them. These are known as dividers. We can customize them by using the .breadcrumb-item selector to add dividers between the links in the breadcrumb. They can be added using ::before or ::after pseudo-element.

To change the divider to and to customize its color in the breadcrumb shown in the above example, we can simply write this CSS code.

Code

.breadcrumb-item + .breadcrumb-item::before {
	content: ">" ;
	color: red ;
}

Output

Output

Breadcrumb Styling

You can change the color of the breadcrumb navigation panel and text according to your choice. It can be done by using background and text contextual classes. Let us look at the example where the navigation panel is colored in the dark.

Code

<nav>
	<ul class="breadcrumb bg-dark">
		<li class="breadcrumb-item"><a href="#">Coding Ninjas Studio</a></li>
		<li class="breadcrumb-item"><a href="#">Library</a></li>
		<li class="breadcrumb-item active text-white">Web Technologies</li>
	</ul>
</nav>

Output

Output

Frequently Asked Questions

What are the advantages of using Bootstrap?

Bootstrap provides a large variety of pre-styled components like buttons, forms, etc. It is used to create responsive designs without any effort. The pages made using bootstrap components are faster and have more functionality.

What is the purpose of Breadcrumbs?

The main purpose of Breadcrumbs is to help users understand the website's structure. It gives the user's current location within a website, which increases the user experience. It can also help to improve the SEO of a website.

Can we change the presentation of navigation in breadcrumbs?

Yes, the presentation of navigation in breadcrumbs can be changed by using CSS to customize the view of the breadcrumbs. We can change the breadcrumbs' spacing, colors, alignment, etc.

What is the difference between CSS and Bootstrap?

CSS (Cascading Style Sheets) is a styling language that is used to customize the layout and styles of HTML documents. While Bootstrap is a front-end framework built on top of CSS, and it provides pre-designed UI components.

What is the role of active class in Breadcrumbs?

The active class is used to define the current page of the website where the user is present. It is applied to the <li> tag of the page on which the user is currently on. The appearance of the current page link can be changed with it.

Conclusion

In the article, we learned about Breadcrumb and Boostrap. We have seen how we can create a Breadcrumb using HTML, CSS and Boostrap. We have learned about dividers in Bootstrap breadcrumb and breadcrumbs' navigation panel. 

You can refer to other articles on Bootstrap:

 

You may refer to our Guided Path on Code Studios for enhancing your skill set on DSACompetitive ProgrammingSystem Design, etc. Check out essential interview questions, practice our available mock tests, look at the interview bundle for interview preparations, and so much more!

Happy Learning, Ninjas!

Previous article
Bootstrap Navbar
Next article
Bootstrap - Pagination
Live masterclass