Having two columns taking the full width but with a separator - css

Question

Hey I am having the following html code :
<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>
and in my css:
.foo {
background-color: white;
}
I can't add some margin between them as they are taking the full width due to bootstrap. Though I would like to add a separator between them (10px or so) with no background-color. How can I achieve this (I have to use bootstrap for other reasons).

Answer 1

You can edit the alignment of the col margins, and offset with padding:
Demo Fiddle
<div class='col-sm-7 foo'>...</div>
<div class='col-sm-5 foo'>...</div>
.foo {
background-color: white;
}
#media (min-width: 768px) {
.foo:first-of-type {
margin:0 5px 0 -5px;
padding-left:20px;
}
.foo:last-of-type {
margin:0 -5px 0 5px;
padding-right:20px;
}
}
body {
background:black;
}

Answer 2

Add another div width a col size of 1 and a width of 10px and no background. Change the column width of the others as needed.

Answer 3

Bootstrap columns have 15px padding by default, so could you wrap your foo class in a column? For example:
<div class="col-sm-7">
<div class="foo"></div>
</div>
<div class="col-sm-5">
<div class="foo"></div>
</div>
Then you have your foo divs with white background and 15px of padding (and no background color).
http://jsfiddle.net/3cz3zy3k/

Answer 4

Just put your background color on a child of the column rather than the column itself. In my experience it's best to avoid modifying grid elements in general.
.foo {
background-color: pink;
}
<div class="container-fluid">
<div class="row">
<div class='col-xs-7'><div class='foo'>...</div></div>
<div class='col-xs-5'><div class='foo'>...</div></div>
</div>
</div>
Demo