"Untitled"
Bootstrap 4.1.1 Snippet by divyalahad

Post to Facebook Tweet this

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
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="breadcrumb">
<a href="#">
<span class="breadcrumb__inner">
<span class="breadcrumb__title">Website Root</span>
<span class="breadcrumb__desc">First Item</span>
</span>
</a>
<a href="#">
<span class="breadcrumb__inner">
<span class="breadcrumb__title">Page Depth 02</span>
<span class="breadcrumb__desc">Second Item</span>
</span>
</a>
<a href="#">
<span class="breadcrumb__inner">
<span class="breadcrumb__title">Page Depth 03</span>
<span class="breadcrumb__desc">Third Item</span>
</span>
</a>
<a href="#">
<span class="breadcrumb__inner">
<span class="breadcrumb__title">Page Depth 04</span>
<span class="breadcrumb__desc">Fourth Item</span>
<span class="breadcrumb__desc">With Additional Line</span>
</span>
</a>
<a href="#">
<span class="breadcrumb__inner">
<span class="breadcrumb__title">Page Depth 05</span>
</span>
</a>
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
$base: 38px;
* {margin: 0; padding: 0; box-sizing: border-box}
html, body {
height: 100%;
background-color: #333;
}
.container {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
min-width: 480px;
padding: 0 40px;
}
.breadcrumb {
display: flex;
border-radius: 6px;
overflow: hidden;
margin: auto;
text-align: center;
top: 50%;
width: 100%;
height: $base * 1.5;
transform: translateY(-50%);
box-shadow: 0 1px 1px rgba(0,0,0,1),
0 4px 14px rgba(0,0,0,0.7);
z-index: 1;
background-color: #ddd;
font-size: 14px;
}
.breadcrumb a {
position: relative;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Design System

Questions / Comments: