"Breadcrumbs"
Bootstrap 3.3.0 Snippet by truonganhhoang

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
<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 id="bc1" class="breadcrumb breadcrumb-arrow">
<li><a href="#">Home</a></li>
<li><a href="#">Library Library Library Library Library LibraryLibrary LibraryLibraryLibrary Library</a></li>
<li class="active"><span>Data</span></li>
</ol>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
body{
padding-top: 50px;
}
.breadcrumb-arrow {
height: 36px;
padding: 0;
line-height: 36px;
list-style: none;
background-color: #e6e9ed
}
.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-block;
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, .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
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
$(document).ready(function(){
$(window).resize(function() {
ellipses1 = $("#bc1 :nth-child(2)")
if ($("#bc1 li a:hidden").length >0) {ellipses1.show()} else {ellipses1.hide()}
})
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard Pro
Triangle Breadcrumbs Arrows

Questions / Comments: