Overriding Bootstrap's @breadcrumb-separator

Question

I thought it's possible to replace the @breadcrumb-separator temporarily, but unfortunately it doesn't work that way:

#detailnavigation {
  @breadcrumb-separator: "|";
  .list-inline.related {
    .breadcrumb;
  }
}

Isn't it possible to override a variable in a given scope? Or is the problem that .breadcrumb isn't a mixin?

Lareine

Hi Jim, I see the @breadcrumb-separator variable in L15 of their breadcrumbs.less github.com/twbs/bootstrap/blob/master/less/breadcrumbs.less#L15 – Lareine

sorry, removed my answer because I misunderstood your question...not sure about overriding LESS variables within a particular div, but I'll see if I can find anything :) – Demantoid

Answer 1

FYI I temporarily solved my problem by overriding the Separator manually. There you go:

#detailnavigation {
  .list-inline.related {
    .breadcrumb;
    
    > li+li:before {
      content: "|\00a0"; 
    }
  }
}

Lareine

Answer 2

A bit shorter; here an example for ">"

.breadcrumb>li+li:before { padding: 0 5px; color: #ccc; content: ">"; }

Rhonarhonchus

Answer 3

Bootstrap 5:

:root {
    --bs-breadcrumb-divider: '>';
}

Ambit