Best way to put a vertical line in the Twitter Bootstrap gutter - css

Question

<div class="row-fluid">
<div class="span6"> Some content </div>
<div class="span6"> Some content </div>
</div>
I want to put a vertical line down the middle of the gutter between these two columns.
The line is not the full length of the columns - so I can't just use a border.
I've tried changing my layout to span6, span1, span5 and using the span1 column for the line, but it messes up the space for my right content.
Any ideas ?

Answer 1

If you can go with the assumption that a modern browser (one that supports CSS 3) is being used, you can use the box-sizing property (http://www.w3schools.com/cssref/css3_pr_box-sizing.asp) to override the default Bootstrap .span6.
You may also want to enclose this in a #media query to avoid strange left-side spacing when the browser is resized to a smaller width..
#media (min-width:979px) {
.span6:not(:first-child) {
border-left: 1px solid #ddd;
padding-left: 10px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
}
Bootply

Answer 2

Thanks for the answers. But the problem was not just a border. The vertical line has to be for only part of the length of the columns.
My solution was to use absolute positioning for the vertical line div & I had to give the span column a position:
<div class="row-fluid">
<div class="span6"> Some content </div>
<div class="span6" style="position:relative">
<div class="thin_vertical_line" style="position:absolute;left:-15px;height:70%;top:0px;></div>
Some content
</div>
</div>
The only remaining issue is that the -15px left assumes a gutter width (twitter bootstrap puts a left margin on the second span to get the gutter) of a certain dimension & with response twitter bootstrap this can change depending on screen resolution. -15px is safe but won't be quite centered on smaller devices.

Answer 3

In Bootstrap 4.5.3 you could use this html code:
<div class="container">
<div class="row">
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
<div class="col-md-3"></div>
</div>
</div>
With this CSS:
#media (min-width: 768px){
.container .row .col-md-3:not(:first-child){
border-left: 1px solid #ccc;
}
}