css - how to create margin between bootstrap columns without destroying design? -

css - how to create margin between bootstrap columns without destroying design? -

i have simple markup

<div class="row"> <div class="col-lg-6 loginfield"> info </div> <div class=" col-lg-6 loginfield"> <div class=""> test </div> </div> </div> .loginfield{ background-color:white; }

so problem getting 1 white line on desktop screen, want create 10 px space between 2 columns without destroying responsive design. right if switch smaller screen works, on desctop there no space, , if add together margin, margin presist on smaller screens ugly. p.s. when works on smaller screens, mean 2 columns move under each other , width of white lines shopuld be.

you need mimic same breakpoints in responsive design in bootstrap.css:

http://jsfiddle.net/g6nwh/4/

css:

@media (min-width: 1200px) { .margin-left-10 { margin-left: 10px; } }

html:

<div class="col-lg-6 loginfield"> <div class="margin-left-10"> test </div> </div>

if have changed breakpoints, you'll need update min-width, default min-width bootstrap's big columns.

when screen gets smaller, rule stops beingness applied, won't impact smaller screens.

css twitter-bootstrap