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 that answer which is very similar : https://stackoverflow.com/a/11299934/1478467

I would suggest 2 angles to attack this problem : borders or row background. Here is the demo (jsfiddle).

Below a sample for the background option, the only downside is that you don't really control the width of the line unless you use complex backgrounds.

<div class="row myBackground">
        <div class="span6">span6</div>
        <div class="span6">span6</div>
</div>

/* Put here the background (color, images, etc.) that you want between the columns */
.row.myBackground { background: #F00; }
/* This is the column background, for example white as the page background */
.row.myBackground > [class*="span"] { background: blue; }