3 images in a row will not align properly

Trying to get 3 images to align centrally and distribute evenly within a row then on the mobile breakpoint align centrally vertically (one on top of each other). Can’t figure out what I’m doing wrong.

	<div class="row" style="margin: 30px 0;">
	<div class="col-md-8 col-md-offset-2">
	    <div class="col-lg-4 col-sm-6 col-xs-8">
	    	<a title="#" href="#"><img title="Hitched Breakthrough Award 2014" src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/hitched-award-2014-large.png" alt="Hitched Award 2014 Logo" class="img-responsive" style="height:160px; margin:0 "/></a>
	    </div>
	     <div class="col-lg-4 col-sm-6 col-xs-8">
	        <a title="#" href="http://www.fearlessphotographers.com/photographers.cfm?photogID=5183&dan-morris"> <img title="Fearless Photographers" src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/fearless-logo.png" alt="Fearless Photographers logo" class="img-responsive" style="height:160px"></a>
	    </div>
	     <div class="col-lg-4 col-sm-6 col-xs-8">
	        <a title="#" href="http://junebugweddings.com/best-wedding-photographers/top-photographers/"> <img title="Junebug Weddings - The World's Best Wedding Photographers" src="<?php echo esc_url( get_template_directory_uri() ); ?>/images/junebug-logo.png" alt="Junebug Weddings - The World's Best Wedding Photographers" class="img-responsive" style="height:160px"></a>
	    </div>
    </div>
</div>

Page with all code -
http://stevanbarry.com/beta/dan/

Bootstrap does a 12-grid layout. Your mobile column settings needs to be 12, not 6 or 8 (I assume xs is mobile, not sure if sm is considered mobile as well)

You cannot have .col as a direct child of .col, as you have done with <div class="col-lg-4 col-sm-6 col-xs-8"> inside <div class="col-md-8 col-md-offset-2">, you should use a .row to nest grid items. Also, as noted, your columns must add up to 12, regardless of viewport width.

Thanks both for the advice - the problem I have is on setting the offset col. I want all the content to be in middle of the container and this is why I’m adding in the other col class.

Well, you indeed need to use .col-offset to center the other .cols but the widths of the grid units must add up to twelve, and you cannot nest .col that way. See Nesting columns: grid units (.col) should be contained in .row DIVs.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.