Rishabh Rishabh - 4 months ago 46
CSS Question

Bottom border of bootstrap column goes outside of column because of negative margin of row and padding of column

I am trying to add a bottom border to a bootstrap column, but it's going outside the column div because of the negative margin of row and bootstrap column's padding. Please see below:

enter image description here

Is there any way I can prevent border from going outside and show up only within the column content, like below?

enter image description here

Here is the fiddle.

<div class="container">
<div class="row">

<div class="col-md-12 add-border">
A quick brown fox jumps over the lazy dog.
</div>

</div>
</div>

Answer

Apply padding:0 to your the divs you want to have the border (the following assumes a 3px border-width - change it to suit):

.add-border{
  padding:0;
  border-bottom:3px solid #000;
 }

if you only want to affect the padding to the left and right (but not the top and bottom) then you can use the following:

.add-border{
  padding-left:0;
  padding-right:0;
  border-bottom:3px solid #000;
}
Comments