<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 class="verticals ten offset-by-one">
			<p style="font-style: italic; color: #2196f3; font-size: 18px; text-align: center; margin-top: 0px; margin-bottom: 20px;">Follow me on Twitter: <a href="https://twitter.com/mrdogra007/" target="_blank">@mrdogra007</a></p>
		</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)}
// Breadcrumb plugin - Force Framework 
// Author: Force Framework
// Created Date: 22/03/2018
// Modified Date: 15/12/2023
// Website: https://letsforce.com/
// #ForceFramework

External CSS

  1. https://res.cloudinary.com/mrdogra007/raw/upload/v1534747277/force-framework/current/style.min.css
  2. https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css

External JavaScript

This Pen doesn't use any external JavaScript resources.