Hello everyone, tell me how in the boostrap 3 to align these blocks in the center?

<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>

If I have 4 blocks, then everything is cool, they are centered, and if there are 3 blocks, there isn’t how to make boostrap so that they always align in the center?

    1 answer 1

    Here is a turnkey solution: https://codepen.io/anon/pen/mLJVRm

     .container>.row>some cols

    The meaning is that the bootstrap mesh should consist of 12 columns (4 * 3 = 12) and be framed in a container or a dimensionless container (.container-fluid) in which .row is. If it is important to maintain a fixed column width, then change the width of the container

    • Thank you, but not quite, the fact is that I can have horizontally from 1 column to 4, and I need to do so if 1 column or 2 or 3 they were aligned along the center row - Stas Borzykh
    • if there are three columns, then put col- -4; if there are four columns, then put col- -3 - Andrey B