<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"> <h2>Bootstrap Breadcrumbs</h2> </div> <div class="row"> <ol class="breadcrumb brand-primary"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> <ol class="breadcrumb brand-success"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> <ol class="breadcrumb brand-info"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> <ol class="breadcrumb brand-warning"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> <ol class="breadcrumb brand-danger"> <li><a href="#">Home</a></li> <li><a href="#">Library</a></li> <li class="active">Data</li> </ol> </div> </div>

/*-------------------------------*/ /* Code snippet by */ /* nadzhq@gmail.com */ /*-------------------------------*/ .breadcrumb.brand-primary{ background-color:#428bca; } .breadcrumb.brand-primary a{ color:#fff; } .breadcrumb.brand-primary li.active{ color:#eee; } .breadcrumb.brand-success{ background-color:#5cb85c; } .breadcrumb.brand-success a{ color:#fff; } .breadcrumb.brand-success li.active{ color:#eee; } .breadcrumb.brand-info{ background-color:#5bc0de; } .breadcrumb.brand-info a{ color:#fff; } .breadcrumb.brand-info li.active{ color:#eee; } .breadcrumb.brand-warning{ background-color:#f0ad4e; } .breadcrumb.brand-warning a{ color:#fff; } .breadcrumb.brand-warning li.active{ color:#eee; } .breadcrumb.brand-danger{ background-color:#d9534f; } .breadcrumb.brand-danger a{ color:#fff; } .breadcrumb.brand-danger li.active{ color:#eee; }