How do I replace separator of breadcrumb in react-bootstrap using css?

user_14001613 0
Viewed 1129

so I have a breadcrumb component that I've used with react-bootstrap. I need to override the default separator with ">". But it did not override anything. Could anyone help with this?

Breadcrumb:

<Breadcrumb>
   <Breadcrumb.Item onClick={goTo('/')}>Home</Breadcrumb.Item>
   <Breadcrumb.Item onClick={goTo(`/store`)}>
      {store?.name || 'unknown'}s
   </Breadcrumb.Item>
   <Breadcrumb.Item active>{title}</Breadcrumb.Item>
</Breadcrumb>

CSS:

.breadcrumb-item+.breadcrumb-item::before { content: ">" !important; }
react-bootstrap reactjs breadcrumbs
2 Answers

.breadcrumb-item+.breadcrumb-item::before{content:var(--bs-breadcrumb-divider,">") !important ;}

user_156470190

you can do it like this

.breadcrumb-item + .breadcrumb-item::before {
  content: "|" !important;
}

I am using this code and its working

.breadcrumb-item {
  + .breadcrumb-item::before {
    content: ">" !important;
    align-self: baseline;
    color: #7d8daa;
  }
}

PS : Please make sure that there is no conflicting font-family to the selector else it might not work as expected.

user_74477150
Related