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

hey having following html code :

<div class='col-sm-7 foo'>...</div> <div class='col-sm-5 foo'>...</div> 

and in css:

.foo {    background-color: white; } 

i can't add margin between them taking full width due bootstrap. though add separator between them (10px or so) no background-color. how can achieve (i have use bootstrap other reasons).

you can edit alignment of col margins, , offset 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; }