You are wrapping your images in a “col-md-4” which is stopping you from centering them. Also, you don’t really need all those rows.
If you want images to have the same size even if they have different proportions, you could use a trick with backgrounds. Basically, you replace all your images with divs and give the divs the images as backgrounds.
<div><img src="https://c1.staticflickr.com/9/8160/6988318986_71e0c2af57_b.jpg" class="img-circle img-responsive"></img></div>
<div class="band-image first m-auto"></div>
(Notice that I changed “col-md-4” to “col-12”. This way, the wrapping div is taking all the horizontal space and then the class “m-auto” centers the div with the image, giving it an auto margin on every side)
Then, in your CSS you assign some base styling to the class band-image (width, height and such) and the background-image for each one (first, second, etc), like:
After that, you can use media queries to adjust the divs dimensions according to the resolution, if you need it.
I forked your pen to make you an example here, so you can see the differences.