center multiple bootstrap columns when less than 12 col

Question

<div class="row">
    <div ng-repeat="tile in tiles" class="col-md-3"></div>
</div>

How can I make sure that these bootstrap columns are always centered, even if there is only 2 of them?

Answer 1

Add row-center class to the row and col-center to col-md-3 in this way:

<div class="row row-center">
  <div ng-repeat="tile in tiles" class="col-md-3 col-center"></div>
</div>

.row-center {
  text-align:center;
}

.col-center {
  display:inline-block;
  float:none;
}

Bootply Demo

Answer 2

Starting from bootstrap 4

this feature added!

you can use this class: justify-content-center

so your code should looks like:

<div class="container">
  <div class="row justify-content-center">
    <div class="col-4">
      One of two columns
    </div>
    <div class="col-4">
      One of two columns
    </div>
  </div>
</div>

Check bootstrap documentation: https://getbootstrap.com/docs/4.0/layout/grid/#horizontal-alignment