<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="horizontal">
<div class="verticals twelve">
<h1>Force Framework breadcrumb style</h1>
</div>
<div class="verticals ten offset-by-one">
<h4>Force Framework extra modified</h4><hr>
<ol class="breadcrumb breadcrumb-fill2">
<li><a href="javascript:void(0);"><i class="fa fa-home"></i></a></li>
<li><a href="javascript:void(0);">Library</a></li>
<li><a href="javascript:void(0);">Data</a></li>
<li class="active">Detail</li>
</ol>
</div>
<div class="verticals ten offset-by-one">
<ol class="breadcrumb breadcrumb-fill2 style2">
<li><a href="javascript:void(0);"><i class="fa fa-home"></i></a></li>
<li><a href="javascript:void(0);">Library</a></li>
<li><a href="javascript:void(0);">Data</a></li>
<li class="active">Detail</li>
</ol>
</div>
<div class="verticals ten offset-by-one">
<ol class="breadcrumb breadcrumb-fill2 style3">
<li><a href="javascript:void(0);"><i class="fa fa-home"></i></a></li>
<li><a href="javascript:void(0);">Library</a></li>
<li><a href="javascript:void(0);">Data</a></li>
<li class="active">Detail</li>
</ol>
</div>
<div class="verticals ten offset-by-one">
<ol class="breadcrumb breadcrumb-fill2 style4">
<li><a href="javascript:void(0);"><i class="fa fa-home"></i></a></li>
<li><a href="javascript:void(0);">Library</a></li>
<li><a href="javascript:void(0);">Data</a></li>
<li><a href="javascript:void(0);">Meta Data</a></li>
<li><a href="javascript:void(0);">Multimeta Data</a></li>
<li class="active">Detail</li>
</ol>
</div>
<div class="verticals ten offset-by-one">
<h4 class="m-t-20">Force Framework modified</h4>
<ol class="breadcrumb breadcrumb-fill0">
<li><a href="javascript:void(0);"><i class="fa fa-home"></i></a></li>
<li><a href="javascript:void(0);">Library</a></li>
<li><a href="javascript:void(0);">Data</a></li>
<li class="active">Detail</li>
</ol>
</div>
<div class="verticals ten offset-by-one">
<ol class="breadcrumb breadcrumb-fill1">
<li><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Library</a></li>
<li><a href="javascript:void(0);">Data</a></li>
<li class="active">Detail</li>
</ol>
</div>
<div class="verticals ten offset-by-one">
<h4 class="m-t-20">Original Force Framework</h4>
<ol class="breadcrumb">
<li><a href="javascript:void(0);">Home</a></li>
<li><a href="javascript:void(0);">Library</a></li>
<li><a href="javascript:void(0);">Data</a></li>
<li class="active">Detail</li>
</ol>
</div>
</div>
</div>
body { font-size: 14px; font-family: Roboto;}
h1 { text-align: center; margin-top: 30px; margin-bottom: 50px; }
ol { list-style: none;}
.breadcrumb { width: 100%; float: left; margin: 20px 0; padding: 7px; position: relative; display: block; background: rgba(0,0,0,.05)}
.breadcrumb ol { list-style: none;}
.breadcrumb li { height: 30px; line-height: 30px; float: left; padding: 0 12px;}
.breadcrumb li a { text-decoration: none;}
.breadcrumb li .fa { width: 30px; height: 30px; line-height: 30px;}
.breadcrumb a:hover { text-decoration: none;}
/* Bredcrumb Fill 0 */
.breadcrumb-fill0 { padding: 15px; background: #ffffff; border-radius: 5px; box-shadow: 0px 0px 50px 0px rgba(0,0,0,.2);}
/* Bredcrumb Fill 1 */
.breadcrumb-fill1 { padding: 15px; background: #135fb4; color: #ffffff; border-radius: 5px; box-shadow: 0px 0px 50px 0px rgba(0,0,0,.2);}
.breadcrumb-fill1, .breadcrumb-fill1 li, .breadcrumb-fill1 li.active, .breadcrumb-fill1 li a { color: #ffffff;}
/* Bredcrumb Fill 2 - style 1 */
.breadcrumb-fill2 { padding: 15px; background: #135fb4; color: #ffffff; border-radius: 15px; box-shadow: 0px 0px 50px 0px rgba(0,0,0,.2);}
.breadcrumb-fill2 .fa { position: absolute; background: #135fb4; padding: 25px; border-radius: 50%; left: -10px; top: -10px; font-size: 30px; line-height: 1; box-shadow: 0px 0px 50px 0px rgba(0,0,0,.2);}
.breadcrumb-fill2, .breadcrumb-fill2 li, .breadcrumb-fill2 li.active, .breadcrumb-fill2 li a { color: #ffffff;}
.breadcrumb-fill2 li:first-child { margin-right: 30px;}
/* Bredcrumb Fill 2 - style 2 */
.breadcrumb-fill2.style2 { border-radius: 30px; background: #ff6407;}
.breadcrumb-fill2.style2 .fa { background: #ff6407;}
/* Bredcrumb Fill 2 - style 3 */
.breadcrumb-fill2.style3 { border-radius: 30px; background: #bb123c;}
.breadcrumb-fill2.style3 .fa { background: #F62459;}
/* Bredcrumb Fill 2 - style 4 */
.breadcrumb-fill2.style4 { border-radius: 30px; background: #1f3a93; padding: 0; width: 100%; float: left;}
.breadcrumb-fill2.style4 .fa { border: 5px solid #ffffff; text-align: center; padding: 15px;}
.breadcrumb-fill2.style4 li { height: 50px; line-height: 50px; float: left; padding: 0 12px;}
.breadcrumb-fill2.style4 li:before { display: none;}
.breadcrumb-fill2.style4 li:first-child { background: rgba(0,0,0,.3);}
.breadcrumb-fill2.style4 li:nth-child(2n) { background: rgba(0,0,0,.4);}
.breadcrumb-fill2.style4 li:nth-child(3n) { background: rgba(0,0,0,.3);}
.breadcrumb-fill2.style4 li:nth-child(4n) { background: rgba(0,0,0,.2);}
.breadcrumb-fill2.style4 li:nth-child(5n) { background: rgba(0,0,0,.1);}
.breadcrumb-fill2.style4 li:last-child { background: transparent;}
.breadcrumb .fa:hover { transform: scale(1.15)}
