I have recently created a jsFiddle that showcases my design. I am looking to place a border between the row lines while maintaining the background color displayed in the jsFiddle. How can I achieve extending the column border line?
Here is the HTML markup:
<div class="container top5">
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="row">
<div class="col-md-3 col-xs-3 inner">
<div><b>Type</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>SMS</b></div>
</div>
<div class="col-md-3 col-xs-3 inner">
<div class=""><b>Email</b></div>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<div class=""><b>Business Unit</b></div>
</div>
</div>
</div>
<div class="col-md-12 col-xs-12">
<div class="row border-between">
<div class="col-md-3 col-xs-3 inner">
<span>Another testing text</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span> test</span>
</div>
<div class="col-md-3 col-xs-3 inner">
<span>Random text</span>
</div>
<div class="col-md-3 col-xs-3 inner-end">
<span>Random text</span>
</div>
</div>
</div>
</div>
</div>
And here is the corresponding CSS:
.top5 {
margin-top: 50px;
}
.row {
border: 1px solid;
}
.row + .row {
border-top:0 ;
}
You can view the live demo and code on my Fiddle - here.