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.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With