Bottom Border on Bootstrap Row

Question

I am creating a heading for a section of a page using Bootstrap's grid system, like so:

<div class="row">
    <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>

What I want to do is add a rule - a horizontal line - below the heading row, so that it looks like this (this uses different icons, but don't worry about that):

I can achieve this perfectly by adding this code before the closing tag of the div with the .row class:

<div class="col-sm-12">
    <div style='border-bottom:1px solid #ccc;'></div>
</div>

However, this seems cumbersome to add in all over the place, even if I move the styling to the stylesheet. I've obviously been able to achieve the same effect using append in jQuery (though that has caused issues of its own), but what I'd really like is to accomplish this using pure CSS.

Ideally, I'd add a class to the div with the .row class and the adding of the line would be handled by CSS in the style sheet, but I can't figure it out. The main obstacle is that the child divs to the row have padding of 15px left and right, so if I add the bottom border to the parent row div, the line extends beyond the header content at either end.

Is there a way I can accomplish what I want using pure CSS?

Answer 1

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>

Answer 2

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>