Philip Stratford Philip Stratford - 3 months ago 14
CSS Question

Bottom Border on Bootstrap Row

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):
Example

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

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>