Bootstrap Responsive breadcrumbs


	
<link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">

<div class="container">
    <div class="row">
		<h2>Breadcrumbs 1 (6 elements)</h2>
        <div id="bc1" class="btn-group btn-breadcrumb">
            <a href="javascript:;" class="btn btn-default"><i class="fa fa-home"></i></a>
            <div class="btn btn-default">...</div>
            <a href="javascript:;" class="btn btn-default"><div>label 1</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 2. A very very long one to truncate</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 3</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 4</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 5</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 6. A very very long one to truncate</div></a>
        </div>
	</div>
    
    <div class="row">
    	<h2>Breadcrumbs 2 (8 elements)</h2>
        <div id="bc2" class="btn-group btn-breadcrumb">
            <a href="javascript:;" class="btn btn-default"><i class="fa fa-home"></i></a>
            <div class="btn btn-default">...</div>
            <a href="javascript:;" class="btn btn-default"><div>label 1. A very very long one to truncate</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 2</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 3</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 4</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 5. A very very long one to truncate</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 6</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 7</div></a>
            <a href="javascript:;" class="btn btn-default"><div>label 8</div></a>
        </div>
	</div>

    <div class="row" style="margin-top:30px; color:green; font-weight:bold">
        <div class="visible-xs">Phone (2 elements, max-size:60px)</div>
        <div class="visible-sm">Tablet (4 elements, max-size:100px)</div>
        <div class="hidden-xs hidden-sm">Desktop (6 elements, max-size:160px)</div>
    </div>

    <div class="row" style="margin-top:30px">
        Responsive breadcrumbs that:
        <ul>
            <li>display only the last n elements. Ellipses are added at the beginning of the list if elements are hidden.</li>
            <li>set a maximum size for each elements. Ellipses are added after the label if it's too long.</li>
        </ul>
        <p>By setting breakpoints you can set the number of elements to display and their maximum size for different screen sizes.</p>
    </div>

</div>


    
/* Breadcrumbs from http://bootsnipp.com/snippets/featured/triangle-breadcrumbs-arrows */
.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;
}

.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;
}

/** Default button **/
.btn-breadcrumb .btn.btn-default:not(:last-child):after {
  border-left: 10px solid #fff;
}
.btn-breadcrumb .btn.btn-default:not(:last-child):before {
  border-left: 10px solid #ccc;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):after {
  border-left: 10px solid #ebebeb;
}
.btn-breadcrumb .btn.btn-default:hover:not(:last-child):before {
  border-left: 10px solid #adadad;
}

/* The responsive part */

.btn-breadcrumb > * > div {
    /* With less: .text-overflow(); */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;    
}

.btn-breadcrumb > *:nth-child(n+2) {
  display:none;
}

/* === For phones =================================== */
@media (max-width: 767px) {
    .btn-breadcrumb > *:nth-last-child(-n+2) {
        display:block;
    } 
    .btn-breadcrumb > * div {
        max-width: 60px;
    }
}

/* === For tablets ================================== */
@media (min-width: 768px) and (max-width:991px) {
    .btn-breadcrumb > *:nth-last-child(-n+4) {
        display:block;
    } 
    .btn-breadcrumb > * div {
        max-width: 100px;
    }
}

/* === For desktops ================================== */
@media (min-width: 992px) {
    .btn-breadcrumb > *:nth-last-child(-n+6) {
        display:block;
    } 
    .btn-breadcrumb > * div {
        max-width: 170px;
    }
}


    

	
$(document).ready(function(){
    $(window).resize(function() {

        ellipses1 = $("#bc1 :nth-child(2)")
        if ($("#bc1 a:hidden").length >0) {ellipses1.show()} else {ellipses1.hide()}
        
        ellipses2 = $("#bc2 :nth-child(2)")
        if ($("#bc2 a:hidden").length >0) {ellipses2.show()} else {ellipses2.hide()}
        
    })
    
});