JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<p>Вариант 1<br>
4 ячейки шириной в 2 столбца и отступами в 2 столбца (2 + 4*2 + 2 = 12)</p>
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-offset-2"><div class="box">1</div></div>
<div class="col-xs-2"><div class="box">2</div></div>
<div class="col-xs-2"><div class="box">3</div></div>
<div class="col-xs-2"><div class="box">4</div></div>
</div>
</div>
<p> </p>
<p>3 ячейки шириной в 2 столбца и отступами в 3 столбца (3 + 3*2 + 3 = 12)</p>
<div class="container">
<div class="row">
<div class="col-xs-2 col-xs-offset-3"><div class="box">1</div></div>
<div class="col-xs-2"><div class="box">2</div></div>
<div class="col-xs-2"><div class="box">3</div></div>
</div>
</div>
<hr>
<p>Вариант 2<br>
4 ячейки шириной в 3 столбца (4*3) с отступом в половину расстояния между столбцами за счет отсутствия обертки .row</p>
<div class="container">
<div class="col-xs-3"><div class="box">1</div></div>
<div class="col-xs-3"><div class="box">2</div></div>
<div class="col-xs-3"><div class="box">3</div></div>
<div class="col-xs-3"><div class="box">4</div></div>
</div>
<p> </p>
<div class="container">
<div class="col-xs-4"><div class="box">1</div></div>
<div class="col-xs-4"><div class="box">2</div></div>
<div class="col-xs-4"><div class="box">3</div></div>
</div>
<hr>
<p>Вариант 3<br>
Можно задать отступ в 1 (или сколько угодно) ячейку и сделать внутри разбивку на ячейки.</p>
<div class="container">
<div class="row">
<div class="col-xs-10 col-xs-offset-1">
<div class="row">
<div class="col-xs-3"><div class="box">1</div></div>
<div class="col-xs-3"><div class="box">2</div></div>
<div class="col-xs-3"><div class="box">3</div></div>
<div class="col-xs-3"><div class="box">4</div></div>
</div>
</div>
</div>
</div>
<p> </p>
<div...
CSS
.container>div{background:#eee;}
.box{background:green;color:#fff;text-align:center;}