<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 Default</h2> <div class="btn-group btn-breadcrumb"> <a href="#" class="btn"><i class="glyphicon glyphicon-home"></i></a> <a href="#" class="btn">Snippets</a> <a href="#" class="btn">Breadcrumbs</a> <a href="#" class="btn">Default</a> </div> </div> <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 class="row"> <h2>Breadcrumb Success</h2> <div class="btn-group btn-breadcrumb"> <a href="#" class="btn btn-success"><i class="glyphicon glyphicon-home"></i></a> <a href="#" class="btn btn-success">Snippets</a> <a href="#" class="btn btn-success">Breadcrumbs</a> <a href="#" class="btn btn-success">Success</a> </div> </div> <div class="row"> <h2>Breadcrumb Info</h2> <div class="btn-group btn-breadcrumb"> <a href="#" class="btn btn-info"><i class="glyphicon glyphicon-home"></i></a> <a href="#" class="btn btn-info">Snippets</a> <a href="#" class="btn btn-info">Breadcrumbs</a> <a href="#" class="btn btn-info">Info</a> </div> </div> <div class="row"> <h2>Breadcrumb Warning</h2> <div class="btn-group btn-breadcrumb"> <a href="#" class="btn btn-warning"><i class="glyphicon glyphicon-home"></i></a> <a href="#" class="btn btn-warning">Snippets</a> <a href="#" class="btn btn-warning">Breadcrumbs</a> <a href="#" class="btn btn-warning">Warning</a> </div> </div> <div class="row"> <h2>Breadcrumb Danger</h2> <div class="btn-group btn-breadcrumb"> <a href="#" class="btn btn-danger"><i class="glyphicon glyphicon-home"></i></a> <a href="#" class="btn btn-danger">Snippets</a> <a href="#" class="btn btn-danger">Breadcrumbs</a> <a href="#" class="btn btn-danger">Danger</a> </div> </div> <div class="row"> <h2>Breadcrumb Rainbow</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-info">Snippets</a> <a href="#" class="btn btn-success">Breadcrumbs</a> <a href="#" class="btn btn-warning">Rainbow</a> </div> </div> </div>

/** The Magic **/ .btn-breadcrumb .btn:not(:last-child):after { content: " "; display: block; width: 0; height: 0; border-top: 17px solid transparent; border-bottom: 17px solid transparent; border-left: 10px solid white; position: absolute; top: 50%; margin-top: -17px; left: 100%; z-index: 3; } .btn-breadcrumb .btn:not(:last-child):before { content: " "; display: block; width: 0; height: 0; 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; } /** The Spacing **/ .btn-breadcrumb .btn { padding:6px 12px 6px 24px; } .btn-breadcrumb .btn:first-child { padding:6px 6px 6px 10px; } .btn-breadcrumb .btn:last-child { padding:6px 18px 6px 24px; }