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

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

I think I got your question right... this the below codes. The inline style below is just for illustration. You apply your styling in the css file.

<div class="container">
    <div class="row-fluid">
        <div class="span6" style="padding-right:20px; border-right: 1px solid #ccc;">
            <p>Some Contents Here...</p>
        </div>

        <div class="span6">
            <p>Some Contents Here...</p>
        </div>
    </div>
</div>

The above code shall output this image.

enter image description here


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