Q:

3 blocks inline with bootstrap and dynamic data (for loop)

I'm trying to render my data into 3 blocks next to each other
I tried this code :
{% for row  in rows %}
    <div class="col-md-4" >  
        {% for column, cell in row.items %}
              {{ cell }}
        {% endfor %}
    </div>
{% endfor %}

The blocks are displayed next to each other.. but they are very close .. I want to add a space between the blocks so I added a margin of 15px as style of the div . This change pushed the third div to the next line.
I changed col-md-4 to col-md-3 but the blocks were very disordered.
Is there a way to have a space between blocks without pushing the third div to next line?

A:

The solution is to give background color to div nested inside the columns of grid.

body {
  width: 100%;
  padding: 10px;
}

.col-xs-4 {
  height: 50px;
  padding: 0 10px; /*Required spacing here */
}

.content {
  height: 100%;
  width: 100%;
  background-color: orange;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

<div class="row">
  <div class="col-xs-4">
    <div class="content"></div>
  </div>
  <div class="col-xs-4">
    <div class="content"></div>
  </div>
  <div class="col-xs-4">
    <div class="content"></div>
  </div>
</div>

