Bottom Border on Bootstrap Row
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>
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>