I am working on the Tribute page. I cannot seem to get the image or text to center with bootstrap. I have tried center-block and img-responsive classes. I know I’m just doing some small thing wrong but I’ve been working on this one part for over an hour. Here is the link to my codepen (https://codepen.io/Dylanidas/pen/pwgJOw) Any help would be appreciated.
Hi,
you’ve a couple of things missing and others in the wrong place.
First you need to declare de class for the first div (class=“container”),
if you put another class (text-center) next to jumbotron(class=“jumbotron text-center”), you don’t need the following divs(row, col-xs-12) remove then, you don’t need the inline style in the h3 tag, also you’re declaring the (img-responsive) in the wrong div, you must put that class in the img tag. with that, i think you’re good to go.
Ok i got the image and text centered. So are you saying that I dont need BOTH the
《div class=“row”》and the 《div class=“col- xs- 12 ETC.”》 I only need one or the other? Why is that? Thank you for your help☺
You don’t need both because you are using the jumbotron.
Unless you want to use some kind of grid inside that, you don’t need to use those classes, jumbotron is the only class you need.
Ok awesome. Thanks for all the help
I just deleted the div class=“col- xs- 12 ETC.” and It made the image shift back to the left. I can however delete the row tag safely without any change.
put the (text-center) in the jumbotron class.
Don’t forget to update the first div with (class=“container”).
Hope that helps
Here’s an update.
I see you’re using bootstrap 4, so change (img-responsive) to (img-fluid) to make it responsive
How can you tell that?
Here’s the documentation for the bootstrap 4.