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

Popular posts from this blog

Converting A String To Int In Groovy

"Cannot Create Cache Directory /home//.composer/cache/repo/https---packagist.org/, Or Directory Is Not Writable. Proceeding Without Cache"

Android How Can I Convert A String To A Editable