Change Bootstrap breadcrumbs divider color - html

Question

I'm using Bootstrap 3 and am overriding .btn-primary with the following css to change the color a bit
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74
}
I'm trying to use this breadcrumb example but when I do, the arrow points (triangle bits) that separate the items are not the same color as the buttons. This happens on the normal state as well as the hover/active state.
What CSS properties do I need to edit to make these triangles the same color as my buttons?
.btn-primary {
color: #fff;
background-color: #337ab7;
border-color: #2e6da4
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
color: #fff;
background-color: #286090;
border-color: #204d74
}
.btn-breadcrumb .btn:not(:last-child):after {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 10px solid white;
position: absolute;
top: 50%;
margin-top: -17px;
left: 100%;
z-index: 3;
}
.btn-breadcrumb .btn:not(:last-child):before {
content: " ";
display: block;
width: 0;
height: 0;
border-top: 17px solid transparent;
border-bottom: 17px solid transparent;
border-left: 10px solid rgb(173, 173, 173);
position: absolute;
top: 50%;
margin-top: -17px;
margin-left: 1px;
left: 100%;
z-index: 3;
}
/** The Spacing **/
.btn-breadcrumb .btn {
padding: 6px 12px 6px 24px;
color: #fff;
}
.btn-breadcrumb .btn:first-child {
padding: 6px 6px 6px 10px;
}
.btn-breadcrumb .btn:last-child {
padding: 6px 18px 6px 24px;
}
/** Primary button **/
.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
border-left: 10px solid #428bca;
}
.btn-breadcrumb .btn.btn-primary:not(:last-child):before {
border-left: 10px solid #357ebd;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
border-left: 10px solid #3276b1;
}
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before {
border-left: 10px solid #285e8e;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="container">
<div class="row">
<h2>Breadcrumb Primary</h2>
<div class="btn-group btn-breadcrumb">
<i class="glyphicon glyphicon-home"></i>
Snippets
Breadcrumbs
Primary
</div>
</div>
</div>

Answer 1

This is the CSS you need to use on normal state:
.btn-breadcrumb .btn.btn-primary:not(:last-child):after {
border-left: 10px solid #327CBA;
}
This is the CSS you need to use on hover state:
.btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after {
border-left: 10px solid #286090;
}
Just find the definitions in your CSS file and replace it with the code above.You just need to change the colors for the normal state and hover state actually.

Answer 2

Just remove the arrows altogether
.btn.btn-primary:not(:last-child)::before,
.btn.btn-primary:not(:last-child)::after {
content: none;
}