Can't Center Image On Tribute Pen

1

Good Day,

I’m trying to center an image on my tribute page but without success, https://codepen.io/EnnisP/pen/bRogbe

I can’t remember everything I’ve tried, but so far nothing has worked. Any help would be appreciated.

Thanks,
Ennis

2

Hi @EnnisP

The class for the image container should be .text-center

Hope this helps

3

Hey @Alextc,

Thanks for the response. I tried text-center with and without img-fluid but unfortunately, it didn’t work either way.

Not sure what I’m doing wrong.

4

I have just changed the class to text-center and pressed Run and it centered the image.

Did you run the codepen again?

5

In your CSS you can give the img element a display of block and a margin of auto like this.

img {
display: block;
margin: auto;
}
That should center your image.

6

I found a few things that needed to be adjusted.

First, load Bootstrap 3 (you have Bootstrap 4 loaded) in the CSS settings.

Then, after loading Bootstrap 3 this HTML works:

<div class="containter-fluid">
  <div class="jumbotron">
    <h1 class="text-center">Chocolate And Coffee</h1>
    <h2 class="text-center">What's Not To Like</h2>
  
    <img class="img-responsive center-block" src="https://www.dropbox.com/s/o5hyycjoqfh1fo1/chocolate-coffee-550x275px%20rsz.jpg?dl=1" alt="coffee and chocolate">
  </div>
</div>

Don’t use the text-center class to center images in Bootstrap. Use the center-block class.

Hope this helps :grinning:

1 Like
7

Try changing class=“containter-fluid text-centered” to class=“containter-fluid text-center”

8

Thanks everybody. Found my mistake.

It was a spelling issue. I typed in centered instead of center. Silly, I know, but thanks a mill for all the responses. Really appreciate the support.

9

@mkmanges

Just curious. I’ve noticed other’s recommending Bootstrap 3 instead of 4. What’s the rationale? I downloaded 4 only because it sounded like the most recent version, but I really don’t know that much about either.

Thanks for the recommendations.

10

From the little bit I’ve read, Bootstrap 4 is an ‘alpha’ release which means it is missing some functionality and has bugs. The next release should be the ‘beta’ version which will have all the functionality of the final product but might still have a few bugs. Until Bootstrap 4 is officially released, you might run into issues using it; definitely would not want to use it on a production website until the official version is released.

For now, Bootstrap 3 is the official version of Bootstrap. Bootstrap 4 (alpha) is for testing purposes.

1 Like
11

Thanks for that. Learning something new every day. I’m now running B3.

12

Thank you! You gave me a reason to look into it :thumbsup:

13

Hey Ennis,

An pretty simple shortcut I found was to use . It involves more typing but it was a quick fix for me. Hope it helps

14

@Ryanquiles

Not sure I understand Ryan. Did you mean to type only a dot (.) or did you make my oft repeated mistake and leave something out? If only the dot was intended, where should it go? I was thinking only CSS used the dot but, then again, most of this stuff is way over my head.

Thanks for the response, though.

15
ah, terrible sorry seems the code worked instead of posted. i meant to say use the term **center** in the < >, before and closing it after the piece you wish to center
16

Thanks for the clarification. All is good!

17

This worked! I had also loaded bootstrap 4. As soon as I loaded bootstrap 3, the center-block class worked.