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>

Tags:

Css

Twitter Bootstrap 3

Recent Posts