The issue lies in the padding and margin settings for the breadcrumb items. Here is a customized CSS solution that addresses this problem:
/* Customized CSS */
.breadcrumb.breadcrumb-custom {
padding: 0;
/*border-color: #dbe3e6;*/
}
/*.breadcrumb {
border: 1px solid #f3f3f3;
}*/
.breadcrumb.breadcrumb-custom .breadcrumb-item {
font-size: 17px;
background: #dbe3e6;
padding: 8px;
color: #000;
}
a:link{
text-decoration: none;
}
.breadcrumb.breadcrumb-custom .breadcrumb-item a {
position: relative;
color: inherit;
border: 1px solid #dbe3e6;
/*padding-left: 5px;*/
}
.breadcrumb.breadcrumb-custom .breadcrumb-item a::before {
right: -21px;
z-index: 3;
border-left-color: #dbe3e6;
border-left-style: solid;
border-left-width: 12px;
}
.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
border-top: 21px solid transparent;
border-bottom: 22px solid transparent;
border-left: 12px solid #ffffff;
top: -9px;
right: -23px;
}
.breadcrumb.breadcrumb-custom .breadcrumb-item:last-child {
background: transparent;
margin-left: 5px;
}
.breadcrumb-item + .breadcrumb-item::before {
display: inline-block;
padding: 8px;
color: #6c757d;
content: "/";
}
.breadcrumb.breadcrumb-custom .breadcrumb-item::before {
content: "";
}
.breadcrumb.breadcrumb-custom .breadcrumb-item a::before,
.breadcrumb.breadcrumb-custom .breadcrumb-item a::after {
position: absolute;
top: -9px;
width: 0;
height: 0;
content: "";
border-top: 21px solid transparent;
border-bottom: 21px solid transparent;
}
/* HTML */
<div class="page-content page-container" id="page-content">
<div class="padding">
<div class="row container">
<div class="col-md-12">
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-custom">
<li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
<li class="breadcrumb-item active" aria-current="page"><span>Portfolio</span></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-custom">
<li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
<li class="breadcrumb-item"><a href="#" data-abc="true">prova</a></li>
<li class="breadcrumb-item active" aria-current="page"><span>user</span></li>
</ol>
</nav>
<nav aria-label="breadcrumb">
<ol class="breadcrumb breadcrumb-custom">
<li class="breadcrumb-item"><a href="#" data-abc="true">Home</a></li>
<li class="breadcrumb-item"><a href="#" data-abc="true">Portfolio</a></li>
<li class="breadcrumb-item"><a href="#" data-abc="true">Eventi</a></li>
<li class="breadcrumb-item active" aria-current="page"><span>Santa Pasqua 2024</span></li>
</ol>
</nav>
</div>
</div>
</div>
</div>
To view the working example, check out this Js Fiddle link: https://jsfiddle.net/developer2018/nhrj7eyd/2/