How to make hr longer between cols? - html

Question

I am using bootstrap for my column structure and want to draw a horizontal line between the columns:
<div class="col-md-2 col-xs-12">
<div class="col-md-2 icon">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</div>
<div class="col-md-10 height hidden-xs">
<p>mycomp account number</p><span class="text">2000299999940</span>
</div>
<div class="visible-xs height">
<hr>
<p class="col-xs-5">mycomp account number:</p>
<p class="col-xs-7">2000299999940</p>
</div>
</div>
<div class="col-md-1">
<hr class="line" />
</div>
css:
.line {
width: 200px;
height: 3px;
background-color: #dadada;
margin-right:40px;
}
Because of the bootstrap columnstructure there are margins involved, but how can I make the line without all the space ie make it wider? Codepen here

Answer 1

well in case you want to ignore the default padding and margin in bootstrap make a class in css file as
.no-padding-margin
{
padding:0px;
margin: 0px;
}
and then apply this class to your bootstrap columns as
<div class="col-md-2 col-xs-12 no-padding-margin">
<div class="col-md-2 icon">
<i class="fa fa-bandcamp" aria-hidden="true"></i>
</div>
<div class="col-md-10 height hidden-xs">
<p>mycomp account number</p><span class="text">2000299999940</span>
</div>
<div class="visible-xs height">
<hr>
<p class="col-xs-5">mycomp account number:</p>
<p class="col-xs-7">2000299999940</p>
</div>
</div>
<div class="col-md-1 no-padding-margin">
<hr class="line" />
</div>

Answer 2

well as i understand you just want your line to be longer .
so why don't you remove the paddings from the col the line is in. and also add width:100% on the .line if you want.
code :
.line {
width: 100%;
height: 3px;
background-color: #dadada;
}
.col-md-1 {
padding-left:0;
padding-right:0;
}