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

Question

Two column layout with a line in the middle.

[                      ] | [                      ]
[                      ] | [                      ]
[               


        

Answer 1

Based on @Ross Angus solution I found a way to adapt height. Just placing on top of each others borders of each columns.

.grid--borderBetween > [class*='col-']:before,
.grid--borderBetween > [class*='col-']:after {
    background: #b2b2b2;
    bottom: 0;
    content: " ";
    position: absolute;
    width: 1px;
    top: 0;
}
.grid--borderBetween > [class*='col-']:before {
    left: 0;
}
.grid--borderBetween > [class*='col-']:after {
    right: -1px;
}
.grid--borderBetween > [class*='col-']:first-child:before,
.grid--borderBetween > [class*='col-']:last-child:after {
    display: none;
}