Two column layout with a line in the middle.
[ ] | [ ]
[ ] | [ ]
[ ] | [ ]
[ Left Column ] | [ Right Column ]
[ ] | [ ]
[ ] | [ ]
[ ] | [ ]
[ ] | [ ]
My solution uses the :before
pseudo-element to put a positioned element between the columns. This doesn't require any more HTML elements and will just be applied to immediate child .col-*
elements of the .border-between
class. This should be applied to the same element as the .row
.
HTML
<div class="row border-between">
<p class="col-sm-6">This column does not have a border, because it's a first child.</p>
<p class="col-sm-6">This column has a border to the left</p>
</div>
CSS
.border-between > [class*='col-']:before {
background: #e3e3e3;
bottom: 0;
content: " ";
left: 0;
position: absolute;
width: 1px;
top: 0;
}
.border-between > [class*='col-']:first-child:before {
display: none;
}