I am creating a responsive template using Bootstrap. I have multiple items located in a row, so that depending on a resolution there can be different amount of items in one row and a different amount of rows accordingly.

```
<div class="row">
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  <div class="col-xs-6 col-sm-4 col-md-3">
    <div class="item"> ... </div>
  </div>
  ...
</div> <!-- / .row -->

```

Every item has a bottom margin, so that they don't stick together vertically: 

```
.item {
  margin-bottom: 20px;
}

```

Is there any way to set the bottom margin to "0" for all the items of **the last row**? (taken that we don't know which items will be in that last row on different resolutions).

*PS: Don't get confused with the `.row` container. This doesn't mean that the divs inside are a single row. This is just a wrapper for the .col-* containers.

JSFiddle: <http://jsfiddle.net/m668fska/>