Всем привет подскажите как в boostrap 3 выровнить эти блоки по центру?
<div class="row">
<div class=" col-xs-2 col-md-3">
<div class="card mb-4 box-shadow">
<img src="#" class="img-fluid">
<div class="card-body">
<p class="card-text text-center"><b>text</p>
</div>
<div class="text-center">
<a class="btn btn-lg text-uppercase u-btn-green cs-font-weight-700 cs-font-size-11 cs-color-white cs-color-white--hover cs-bg-primary--hover cs-brd-none rounded-0 cs-px-20 speaker_button_container" href="#" style="margin-bottom: 5px;">подробнее</a>
</div>
</div>
</div>
<div class=" col-xs-2 col-md-3">
<div class="card mb-4 box-shadow">
<img src="#" class="img-fluid">
<div class="card-body">
<p class="card-text text-center"><b>text</p>
</div>
<div class="text-center">
<a class="btn btn-lg text-uppercase u-btn-green cs-font-weight-700 cs-font-size-11 cs-color-white cs-color-white--hover cs-bg-primary--hover cs-brd-none rounded-0 cs-px-20 speaker_button_container" href="#" style="margin-bottom: 5px;">подробнее</a>
</div>
</div>
</div>
<div class=" col-xs-2 col-md-3">
<div class="card mb-4 box-shadow">
<img src="#" class="img-fluid">
<div class="card-body">
<p class="card-text text-center"><b>text</p>
</div>
<div class="text-center">
<a class="btn btn-lg text-uppercase u-btn-green cs-font-weight-700 cs-font-size-11 cs-color-white cs-color-white--hover cs-bg-primary--hover cs-brd-none rounded-0 cs-px-20 speaker_button_container" href="#" style="margin-bottom: 5px;">подробнее</a>
</div>
</div>
</div>
</div>
Если у меня 4 блока, то все классно они выравниваются по центру, а если 3 блока то нет, как сделать стандартными средствами boostrap что бы они выравнивались всегда по центру?