nav {
ol.breadcrumb {
background-color: unset;
.breadcrumb-item {
a {
color: #0a0a0a;
&:hover {
color: #0a0a0a;
text-decoration: underline;
}
}
&:before {
&:not(:first-child){
content: ">>" !important;
}
}
}
}
}<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet"/>
<nav aria-label="breadcrumb">
<ol class="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>The above code is of the bootstrap breadcrumbs.In the above SCSS code I've tried to change the pseudo element content "/" to ">>" but the code is not working for me.
If I remove &:not(:first-child) section it works. But I don't want ">>" to appear for the first element.
The default bootstrap nav has more specific styles than yours. There are written like this in scss:
nav {
ol.breadcrumb {
.breadcrumb-item {
& + .breadcrumb-item {
&::before {
content: ">>" !important;
}
}
}
}
}
Check the demo here.
Additionally how do I position it in the center of the page ? As
text-centerdoesn't work well with this.Can you please additionally
upvoteandvalidatemy answer first ? ;)@TanjaForsberg To center it you will have to add
justify-content: centertonav ol.breadcrumb@TanjaForsberg Can you please
validatemy answer ?:)