Centering thumbnail in Boostrap 4 - A frustrating, fruitless search

Hey all!

I’m working on my tribute page right now and man, is mine ugly. I’m still working on prettying it up, but I’m having a major issue getting my thumbnail to center.

I decided to format mine like the code camp example, and when I went to go make a thumbnail, I had a ton of trouble getting it to center.

This is the sample code I was using at the time:

     <div class='row'>
	  <div class='img-thumbnail'>
	    <div class= 'text-center'>
	      <img 
 src='http://res.cloudinary.com/pandoozie/image/upload/v1501972697/352EE137-_icigao.jpg' 
alt='Bailey Lavenda Rainwater looking totes cute' height='350px'>
	    </div>
	  </div>
     </div>

For the life of me, this would not center. After about an hour of reading and trial and error, I finally got it to center by removing the initial <div class='row>. So my first question, is why would it not center while in a “row”. This also didn’t work when I tried to use “class=‘col-12’”

After I removed that div, and it centered, the thumbnail left and right borders extend all the way to the edges of my screen now.

I’m somewhat on a loss on how to appropriately center this.

Link for more context ( https://codepen.io/FoofyMonster/pen/NvrRNm )
(It’s currently ugly and not exactly a tribute page, but I’m going through the same steps you would for a tribute page)

I think this is because of how Bootstrap 4 creates its grid. The grid uses flexbox.

When you first attach .row, it makes everything inside the row flex items and jams them into the top left corner. If there are more items in the row than the physical space allows, it shrinks those items to fit.

You can (and did) try to space items out by setting columns. I’m not sure where you attached the .col class, but this worked for me:

	<div class="row">
		<div class='img-thumbnail col-12'>
			<div class= 'text-center'>
				<img src='http://res.cloudinary.com/pandoozie/image/upload/v1501972697/352EE137-_icigao.jpg' alt='Bailey Lavenda Rainwater looking totes cute' height='350px'>
			</div>
		</div>
	</div>

Here’s the thing

There isn’t an appropriate way to center. Your current method works just as well as any other. Unless you have a pressing need to learn every centering method, don’t worry about it. There will be plenty of time in your Dev career to learn and refine your techniques.

Also,… not so ugly. Keep going. :slight_smile:

Thank you so much for your help! I ended up going with your solution.