Bootstrap Utility Classes and Custom CSS
- HTML Structure: Use Bootstrap Grid System and Utility classes to lay Breadcrumb items.
- CSS Styling: Using custom CSS for styling to give the arrow effect.
Example: We Will Use the Pseudo-Elements for Arrow Shapes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width, initial-scale=1.0">
<title>Triangle Breadcrumbs</title>
<link href=
"https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css"
rel="stylesheet">
<link href="styles.css" rel="stylesheet">
</head>
<body>
<h2 class="text-success">
w3wiki
</h2>
<h2>
How To Create a Triangle
BreadCrumb arrow in Bootstrap?
</h2>
<nav aria-label="breadcrumb">
<ol class="breadcrumb triangle-arrow-breadcrumb">
<li class="breadcrumb-item">
<a href="#">Home</a></li>
<li class="breadcrumb-item">
<a href="#">Library</a></li>
<li class="breadcrumb-item active"
aria-current="page">
Data
</li>
</ol>
</nav>
</body>
</html>
/* Write CSS Here */
.breadcrumb {
background: none;
padding: 0;
margin: 0;
list-style: none;
display: flex;
align-items: center;
}
.breadcrumb .breadcrumb-item {
position: relative;
padding: 10px 20px;
background-color: #007bff;
color: white;
}
.breadcrumb .breadcrumb-item::after {
content: '';
position: absolute;
top: 0;
right: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid #007bff;
}
.breadcrumb .breadcrumb-item + .breadcrumb-item::before {
content: '';
position: absolute;
top: 0;
left: -15px;
border-top: 15px solid transparent;
border-bottom: 15px solid transparent;
border-left: 15px solid white;
}
.breadcrumb .breadcrumb-item a {
color: white;
text-decoration: none;
}
.breadcrumb .breadcrumb-item.active {
background-color: #0056b3;
}
.breadcrumb .breadcrumb-item.active::after {
border-left-color: #0056b3;
}
.breadcrumb .breadcrumb-item.active a {
color: white;
}
Output:
How to Create a Triangle Breadcrumb Arrows in Bootstrap ?
Bootstrap 5 provides a series of classes that can be used to apply various styling to the tables such as changing the heading appearance, making the rows striped, adding or removing borders, making rows hoverable, etc. In this article, we will learn How to create triangle breadcrumb arrows in Bootstrap. Breadcrumbs are a way to show users their current location within a website’s and allow them to navigate back to previous pages easily. Adding triangle arrows gives a distinct and stylish appearance to the standard breadcrumb.
These are the following approaches:
Table of Content
- By using Pure CSS
- Bootstrap Utility Classes and Custom CSS