Bootstrap Breadcrumb hr horizontal rule


	<div class="container">
	<div class="row">
        <hr class="hr-primary">
        <ol class="breadcrumb bread-primary ">
          <button href="javascript:;" class="btn btn-primary"><i class="fa fa-newspaper-o"></i> News</button>
            <li><a href="javascript:;">MY TOPICS</a></li>
            <li><a href="javascript:;">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="javascript:;" class="btn btn-danger"><i class="fa fa-paw"></i> Entertainment</button>
              <li><a href="javascript:;">CELEBRITY</a></li>
              <li><a href="javascript:;">MOVIES</a></li>
              <li class="active">MUSIC</li>
          </ol>
        </div> 
        <div class="row">
        <hr class="hr-success">
        <ol class="breadcrumb bread-success">
            <button href="javascript:;" class="btn btn-success"><i class="fa fa-life-ring"></i> Sports</button>
            <li><a href="javascript:;">NFL</a></li>
            <li><a href="javascript:;">NBA</a></li>
            <li class="active">NCAA</li>
          </ol>
      </div> 
        <div class="row">
        <hr class="hr-warning">
          <ol class="breadcrumb bread-warning">
            <button href="javascript:;" class="btn btn-warning"><i class="fa fa-money"></i> Money</button>
            <li><a href="javascript:;"> MY WATCHLIST</a></li>
            <li><a href="javascript:;">MARKETS PERSONAL</a></li>
            <li class="active">REAL ESTATE</li>
          </ol>
      </div>
      </div>

	<script type="text/javascript">
	
	</script>

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