<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.1.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"> <h2>Breadcrumb Primary</h2> <div class="btn-group btn-breadcrumb"> <a href="#" class="btn btn-primary"><i class="glyphicon glyphicon-home"></i></a> <a href="#" class="btn btn-primary">Snippets</a> <a href="#" class="btn btn-primary">Breadcrumbs</a> <a href="#" class="btn btn-primary">Primary</a> </div> </div> </div>

/** The Magic **/ .btn-breadcrumb .btn:not(:last-child):before { content: " "; display: block; width: 0; height: 0; float : right; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 10px solid rgb(173, 173, 173); position: absolute; top: 50%; margin-top: -17px; margin-left: 1px; left: 100%; z-index: 3; } /** Primary button **/ .btn-breadcrumb .btn.btn-primary:not(:last-child):after { border-left: 10px solid #428bca; } .btn-breadcrumb .btn.btn-primary:not(:last-child):before { border-left: 10px solid #357ebd; } .btn-breadcrumb .btn.btn-primary:hover:not(:last-child):after { border-left: 10px solid #3276b1; } .btn-breadcrumb .btn.btn-primary:hover:not(:last-child):before { border-left: 10px solid #285e8e; }