How do I add a margin between bootstrap columns

Question

Possible duplicate of How do I add a margin between bootstrap columns without wrapping , but i cant apply this solution to my situation. Here is my html:

<div class="container">
  <div class="row">
    <div class="col-xs-6">
        left block
    </div>
    <div class="col-xs-6">
        right block
    </div>
  </div>
</div>

and css:

.container{
    margin: 10px
}
.col-xs-6{
   -webkit-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
   -moz-box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
   box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.5);
   padding: 15px;
}

and link to jsfiddle: http://jsfiddle.net/sujdtsLa/3/

I have two blocks with shadow, that i need to have a margin, when i wrap them into div and add padding, padding just applied, but blocks still close to each other.

I think, i need to use margin property itself, but it will destroy adaptability

score 0 · Accepted Answer · answered Nov 01 '15 at 00:44

Also you could try jQuery-solution

var xs_6_blocks = $('.col-xs-6');
if (xs_6_blocks.length) {
    var xs_6_block = xs_6_blocks.eq(0), // get first block
        block_old_width = xs_6_block.outerWidth(), //get its real width
        margin = 20, // choose margin value
        block_new_width = block_old_width - (margin / 2); //calc new width of blocks
    xs_6_blocks.each(function(i) {
        var item = $(this);
        item.css('width', block_new_width); //apply new width to each block
        if (!i % 2) {
            //and if the block is odd (blocks are zero-based, so even for real)
            item.css('margin', '0 ' + margin + 'px 0 0'); //apply margin
        }
    });
}

watch it on jsfiddle http://jsfiddle.net/bwzLf83c/2/

+ you can wrap it in a function and attach to resize event for more adaptability. but remember to reset original width by remove "style" attr. — Skav, Nov 01 '15 at 00:52

How do I add a margin between bootstrap columns

1 Answers1