Bootstrap grid issue - image divs not centering in row

[stephen_]

Hi all - cant work out why I cant center 3 col-md-3 divs - http://stevanbarry.com/beta/danmorrisphotography/
I’ve tried wrapping them in a smaller overall div but to no avail.

[RyanReese]

Another reason why I hate frameworks.

You can give that inner nested div the following styles

overflow:hidden;
width:75%;/Will match the 9 column width total/
margin:0 auto;/Center/

Then change your md-col-3 to md-col-4 (so the 3 columns take up 100% width of the parent div)

[mawburn]

Your elements do not have proper parents. Columns should have the row parent defined here:

CSS · Bootstrap

This probably won’t help centering. But it needs it regardless.

If you want to center them, you need to apply an offset to the first one. Bootstrap is a 12 column grid and you have 3 x 3, which leaves 3 left over and it doesn’t have a centering feature built in (like some other frameworks). So you’re probably not going to get a good center with that. I’m not sure if you could apply something like a margin: 0 auto; or a text-align: center to them or not. I don’t think you can.

This SO answer should help you center.
^{(sorry if you saw the other 2 links, forget those, use this one)}

[stephen_]

After much soul searching lol… I decided to use bootstraps painful grid and use an offset…

<div id="thumbnail links" class="row">
			<div class="col-md-8 col-md-offset-2">
					<div class="col-md-4">........

[ronpat]

The code in post #4 is invalid. Any object can have only ONE ID (id="thumbnail links" is invalid) and an ID can be used only once on a page (<div id="thumbnails-home" class="row"> I see two of these on your page). If you want more help, I’ll suggest that you back up to wherever you were before you jumped back into Bootstrap’s grid and I’ll give it a go. Not trying to be pushy, I’m just not a Bootsplat person. If you want to stick with Bootstrap, someone else will have to help.