<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"> <div class="row"> <ul class="breadcrumb"> <li class="completed"><a href="javascript:void(0);">Personal Contact</a></li> <li class="active"><a href="javascript:void(0);">Educational/Experience</a></li> <li><a href="javascript:void(0);">Photo Upload</a></li> <li><a href="javascript:void(0);">Payment</a></li> </ul> </div> </div>

.breadcrumb { padding: 0px; background: #D4D4D4; list-style: none; overflow: hidden; margin-top: 20px; } .breadcrumb>li+li:before { padding: 0; } .breadcrumb li { float: left; } .breadcrumb li.active a { background: brown; /* fallback color */ background: #ffc107 ; } .breadcrumb li.completed a { background: brown; /* fallback color */ background: hsla(153, 57%, 51%, 1); } .breadcrumb li.active a:after { border-left: 30px solid #ffc107 ; } .breadcrumb li.completed a:after { border-left: 30px solid hsla(153, 57%, 51%, 1); } .breadcrumb li a { color: white; text-decoration: none; padding: 10px 0 10px 45px; position: relative; display: block; float: left; } .breadcrumb li a:after { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid hsla(0, 0%, 83%, 1); position: absolute; top: 50%; margin-top: -50px; left: 100%; z-index: 2; } .breadcrumb li a:before { content: " "; display: block; width: 0; height: 0; border-top: 50px solid transparent; /* Go big on the size, and let overflow hide */ border-bottom: 50px solid transparent; border-left: 30px solid white; position: absolute; top: 50%; margin-top: -50px; margin-left: 1px; left: 100%; z-index: 1; } .breadcrumb li:first-child a { padding-left: 15px; } .breadcrumb li a:hover { background: #ffc107 ; } .breadcrumb li a:hover:after { border-left-color: #ffc107 !important; }