"Breadcrumbs"
Bootstrap 3.3.0 Snippet by tonetlds

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<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="#">Home</a></li>
<li><a href="#">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
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments:

Hello. I love your design but I can't get it to display in the block arrow format. The first example displays but I want to use the 2nd example. Your assistance is greatly appreciated. I am new at this. Thank you.

CollectiblesCat () - 6 years ago - Reply 0


terimakasih banyak, sangat membantu, saya dari indonesia

ahmad taslim () - 8 years ago - Reply 0