"Breadcrumb hr horizontal rule"
Bootstrap 3.2.0 Snippet by kylinwin

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

Similar snippets: See More


Comments:

comments powered by Disqus