Bottom Border On Bootstrap Row
Answer :
You could do this with a pseudo element with left and right margin to overcome the padding issue:
@import "https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"; .row-bordered:after { content: ""; display: block; border-bottom: 1px solid #ccc; margin: 0 15px; }
<div class="container"> <div class="row row-bordered"> <div class="col-xs-10"> Heading Text </div> <div class="col-xs-2 text-right"> <a href="#"><span class="glyphicon glyphicon-pencil"></span></a> <a href="#"><span class="glyphicon glyphicon-trash"></span></a> </div> </div> </div>
The solution above longer works in Bootstrap 4 due to switching to Flexbox, but a few modifications fixes it:
.row-bordered { position: relative; } .row-bordered:after { content: ""; display: block; border-bottom: 1px solid #ccc; position: absolute; bottom: 0; left: 15px; right: 15px; }
<div class="row row-bordered"> <div class="col-sm-10"> Heading Text </div> <div class="col-sm-2 text-right"> <a href="#"><span class="glyphicon glyphicon-pencil"></span></a> <a href="#"><span class="glyphicon glyphicon-trash"></span></a> </div> </div>
Comments
Post a Comment