<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<ol class="breadcrumb">
<li><a href="#">Home</a></li>
<li><a href="#">Library</a></li>
<li class="active">Data</li>
</ol>
</div>
<div class="container">
<ol class="breadcrumb breadcrumb-arrow">
<li><a href="#">long long long l;ong long long Home</a></li>
<li><a href="#">long long long long long long Library</a></li>
<li class="active"><a href="#">long long long long long long long long Library</a></li>
</ol>
<ul class="br">
<li><a href="#">long long long long long long First entry</a></li>
<li><a href="#">long long long long long long Second entry</a></li>
<li><a href="#">long long long The third one</a></li>
<li><a href="#">long long long long long long And this is some really long entry at the end</a></li>
</ul>
</div>
body{
padding-top: 50px;
}
.br {
height: 36px;
padding: 0;
line-height: 36px;
list-style: none;
background-color: #e6e9ed;
text-overflow:ellipsis;
white-space:nowrap;
overflow:hidden
}
.br li:first-child a {
border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px
}
.br li, .br li a, .br li span {
display: inline;
vertical-align: top;
}
.br li:not(:first-child) {
margin-left: -5px
}
.br li+li:before {
padding: 0;
content: ""
}
.br li span {
padding: 0 10px
}
.br li a, .br li:not(:first-child) span {
height: 36px;
padding: 10px 10px 10px 25px;
line-height: 36px
}
.br li:first-child a {
padding: 10px
}
.br li:not(:last-child) a {
position: relative;
}
.br li a {
color: #fff;
text-decoration: none;
background-color: #3bafda;
border: 1px solid #3bafda
}
.br li:first-child a {
padding-left: 10px
}
.br li a:after, .br li a:before {
position: absolute;
top: -1px;
width: 0;
height: 0;
content: '';
border-top: 18px solid transparent;
border-bottom: 18px solid transparent
}
.br li a:before {
right: -10px;
z-index: 3;
border-left-color: #3bafda;
border-left-style: solid;
border-left-width: 11px
}
.br li a:after {
right: -11px;
z-index: 2;
border-left: 11px solid #2494be
}
.br li a:focus, .br li a:hover {
background-color: #4fc1e9;
border: 1px solid #4fc1e9
}
.br li a:focus:before, .br li a:hover:before {
border-left-color: #4fc1e9
}
.br li a:active {
background-color: #2494be;
border: 1px solid #2494be
}
.br li a:active:after, .br li a:active:before {
border-left-color: #2494be
}
.br li span {
color: #434a54
}
.breadcrumb-arrow {
height: 36px;
padding: 0;
line-height: 36px;
list-style: none;
background-color: #e6e9ed
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.breadcrumb-arrow li:first-child a {
border-radius: 4px 0 0 4px;
-webkit-border-radius: 4px 0 0 4px;
-moz-border-radius: 4px 0 0 4px
}
.breadcrumb-arrow li, .breadcrumb-arrow li a, .breadcrumb-arrow li span {
display: inline;
vertical-align: top;
}
.breadcrumb-arrow li:not(:first-child) {
margin-left: -5px
}
.breadcrumb-arrow li+li:before {
padding: 0;
content: ""
}
.breadcrumb-arrow li span {
padding: 0 10px
}
.breadcrumb-arrow li a {
padding-top:9px;
padding-bottom:9px;
}
.breadcrumb-arrow li a, .breadcrumb-arrow li:not(:first-child) span {
height: 36px;
padding: 0 10px 0 25px;
line-height: 36px
}
.breadcrumb-arrow li:first-child a {
padding: 0 10px
}
.breadcrumb-arrow li a {
position: relative;
color: #fff;
text-decoration: none;
background-color: #3bafda;
border: 1px solid #3bafda
}
.breadcrumb-arrow li:first-child a {
padding-left: 10px
}
.breadcrumb-arrow li a:after, .breadcrumb-arrow li a:before {
position: absolute;
top: -1px;
width: 0;
height: 0;
content: '';
border-top: 18px solid transparent;
border-bottom: 18px solid transparent
}
.breadcrumb-arrow li a:before {
right: -10px;
z-index: 3;
border-left-color: #3bafda;
border-left-style: solid;
border-left-width: 11px
}
.breadcrumb-arrow li a:after {
right: -11px;
z-index: 2;
border-left: 11px solid #2494be
}
.breadcrumb-arrow li a:focus, .breadcrumb-arrow li a:hover {
background-color: #4fc1e9;
border: 1px solid #4fc1e9
}
.breadcrumb-arrow li a:focus:before, .breadcrumb-arrow li a:hover:before {
border-left-color: #4fc1e9
}
.breadcrumb-arrow li a:active {
background-color: #2494be;
border: 1px solid #2494be
}
.breadcrumb-arrow li a:active:after, .breadcrumb-arrow li a:active:before {
border-left-color: #2494be
}
.breadcrumb-arrow li span {
color: #434a54
}
