Bootstrap - Center columns if they don't add up to 12

Question

I am generating Bootstrap columns with a PHP for loop(from a repeater field in ACF for Wordpress). I need to find a way to center a row of columns when the columns within the row don't add up to 12. I saw some other questions regarding this issue, but most involved manually adding a different class to the uneven row. Hoping to avoid that solution since I am generating these columns with a for loop.

Here's an example of the outputted HTML:

<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
  <div class="row">
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
  </div>
</div>

So in this example, I would want the 3 last col-sm-3 elements to be centered below the 4 above them.

Answer 1

I recommend you to use Bootstrap 4. In this case, you can simply add the justify-content-center class to your row.

Heres the working snippet. (probably you won't see, cz you are using sm)

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="container">
  <div class="row justify-content-center">
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
    <div class="col-sm-3">
      Lorem
    </div>
  </div>
</div>