Col-xs-6 divs with margins always end up stacking - html

Question

The picture shows what I want to render. The col-xs-6 divs are the main issue here; I'm assigning them a background-color to make each col-xs-6 look like a panel which means I also need there to be some visible separation between each col-xs-6.
However, any attempts at all to assign margins to the col-xs-6 divs results in them stacking under each other instead of side by side, irrespective of whether I'm testing on mobile or full desktop resolution.
[EDIT: Requested code]
<div class="row">
<div class="col-xs-12 col-sm-10 col-sm-offset-1" style="padding-left:0px; padding-right:0px">
<div class="row" data-bind="with: ElementPairs()[2]">
<div class="row">
<div class="col-xs-6 backgroundPanel fullpad" >
<div class="row">
<div class="col-xs-3">
<!-- Picture -->
<img class="img-responsive img-center" src="/Content/images/Land/buttons/button_blankImage.png" style="background: url('/content/images/land/buttons/button1.png') 50% 50% cover no-repeat;">
</div>
<div class="col-xs-9" data-bind="text: Caption">Some Caption here</div>
</div>
</div>
<div class="col-xs-6 backgroundPanel fullpad">
<div class="row">
<div class="col-xs-3">
<!-- Picture -->
<img class="img-responsive img-center" src="/Content/images/Land/buttons/button_blankImage.png" style="background: url('/content/images/land/buttons/button2.png') 50% 50% cover no-repeat;">
</div>
<div class="col-xs-9" data-bind="text: Caption">Some other caption here and additional description.</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

However, any attempts at all to assign margins to the col-xs-6 divs
results in them stacking under each other instead of side by side,
irrespective of whether I'm testing on mobile or full desktop
resolution.
This is key for the answer. This is how the columns work in boostrap 3:
grid
grid-framework
As you can see, when they create grid layout, of 12 columns, they calculate widths in percentages, and corresponding paddings and margins. Every column is floating to the left (or right for RTL).
If one of the columns becomes wider than "standard" calculated value (in your case you added additional margin), then two div-blocks with of width col-*-6 are not fitting anymore in one row, and the last one floats to the left in the next line, it looks like it was stacked. This is what happening in your case (though, I don't exclude, that you simply messed up with the breakpoints :) - but you haven't provided the code snippet in the question).
If you need to enlarge margins, you need at the same time to give out the same space from paddings/width of each column, at the same time - playing responsive, and updating corresponding breakpoints. Normally, no one does it manually. It's recommended to use less or sass mixins to generate the new grid with your new parameters. The topic was well explained on their official website.
p.s. do not forget to wrap each column with row, when nesting columns. It's common mistake not to include rows to the layout, they are necessary.

Answer 2

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">
<div class="panel panel-success">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div>
</div>
<div class="col-xs-6 col-md-4">
<div class="panel panel-danger">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div></div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">
<div class="panel panel-warning">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div>
</div>
<div class="col-xs-6 col-sm-4">
<div class="panel panel-info">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div>
</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">
<div class="panel panel-default">
<div class="panel-heading">
<h3 class="panel-title">Some Title</h3>
</div>
<div class="panel-body">
<p>Some Body Content Comes here</p>
</div>
<div class="panel-footer">
<p> some footer content of a box comes here</p>
</div>
</div>
</div>
</div>
Here's the Best and simplest way of using bootstrap as boxes (panels as boxes).

Answer 3

The Bootstrap grid system requires col-* elements to be wrapped with "row": http://getbootstrap.com/css/#grid-example-basic
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-8">.col-xs-12 .col-sm-6 .col-md-8</div>
<div class="col-xs-6 col-md-4">.col-xs-6 .col-md-4</div>
</div>
<div class="row">
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
<!-- Optional: clear the XS cols if their content doesn't match in height -->
<div class="clearfix visible-xs-block"></div>
<div class="col-xs-6 col-sm-4">.col-xs-6 .col-sm-4</div>
</div>