How can I add a line between two columns using Twitter Bootstraps grid system

Question

Two column layout with a line in the middle.

[                      ] | [                      ] [                      ] | [                      ] [                      ] | [                      ] [     Left Column      ] | [    Right Column      ] [                      ] | [                      ] [                      ] | [                      ] [                      ] | [                      ] [                      ] | [                      ] 

Answer 1

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; }