<link href="//netdna.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.2.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">
<hr class="hr-primary" />
<ol class="breadcrumb bread-primary ">
<button href="#" class="btn btn-primary"><i class="fa fa-newspaper-o"></i> News</button>
<li><a href="#">MY TOPICS</a></li>
<li><a href="#">WORLD</a></li>
<li class="active">LOCAL</li>
<li class="active">US</li>
</ol>
</div>
<div class="row">
<hr class="hr-danger" />
<ol class="breadcrumb bread-danger">
<button href="#" class="btn btn-danger"><i class="fa fa-paw"></i> Entertainment</button>
<li><a href="#">CELEBRITY</a></li>
<li><a href="#">MOVIES</a></li>
<li class="active">MUSIC</li>
</ol>
</div>
<div class="row">
<hr class="hr-success" />
<ol class="breadcrumb bread-success">
<button href="#" class="btn btn-success"><i class="fa fa-life-ring"></i> Sports</button>
<li><a href="#">NFL</a></li>
<li><a href="#">NBA</a></li>
<li class="active">NCAA</li>
</ol>
</div>
<div class="row">
<hr class="hr-warning" />
<ol class="breadcrumb bread-warning">
<button href="#" class="btn btn-warning"><i class="fa fa-money"></i> Money</button>
<li><a href="#"> MY WATCHLIST</a></li>
<li><a href="#">MARKETS PERSONAL</a></li>
<li class="active">REAL ESTATE</li>
</ol>
</div>
</div>
</div>
@import url(//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css);
hr {
height: 4px;
margin-left: 15px;
margin-bottom:-3px;
}
.hr-warning{
background-image: -webkit-linear-gradient(left, rgba(210,105,30,.8), rgba(210,105,30,.6), rgba(0,0,0,0));
}
.hr-success{
background-image: -webkit-linear-gradient(left, rgba(15,157,88,.8), rgba(15, 157, 88,.6), rgba(0,0,0,0));
}
.hr-primary{
background-image: -webkit-linear-gradient(left, rgba(66,133,244,.8), rgba(66, 133, 244,.6), rgba(0,0,0,0));
}
.hr-danger{
background-image: -webkit-linear-gradient(left, rgba(244,67,54,.8), rgba(244,67,54,.6), rgba(0,0,0,0));
}
.breadcrumb {
background: rgba(245, 245, 245, 0);
border: 0px solid rgba(245, 245, 245, 1);
border-radius: 25px;
display: block;
}
.btn-bread{
margin-top:10px;
font-size: 12px;
border-radius: 3px;
}
