As far as I can tell the top of the two middle images is actually centered, the problem with the second one is because your grid is organised like this for the second row:
<div class="row">
<div class="col-sm-3 col-sm-offset-1"></div>
<div class="col-sm-3 col-sm-offset-1"></div>
<div class="col-sm-3"></div>
</div>
… where your middle column is actually offset by 1/12 of the width of the role because of col-sm-offset-1
. Your probably realise what the problem is by now!
If not: if you change it to match the first row of images, where the middle column has the “correct” class of col-sm-4
, then the image should be centered.
A Bootstrap-free (and more elegant in my opinion) would be Flexbox!
EDIT: deleting the post doesn’t feel quite right, so I undeleted it!