Team,
I have started on my tribute project and using bootstrap classes. Thus far i completed header elements and an image and its caption. I am using class=“text-center” to my
and elements and class=“img-responsive” to the image and however the content so far is aligned on left and NOT in center. I am not sure why the h1,h2 and images are not in the center.
Please help!
You need to make a css class called “text-center”
like this:
.text-center{ text-align: center; }
Put that in your css, everything should be centered now except for the image.
Then, surround the image in a div and assign that div the class “text-center”
Like this:
<div class="text-center"><img class="img-responsive" src="http://static.ibnlive.in.com/ibnlive/pix/ibnhome/gandhiearly23.jpg" alt="gandhiQuote"></div>
And you should be set!
@tormundgiantsbane - Thank you for the response.
I am using Bootstrap classes and have added that to my settings.
https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css
text-center is one of the bootstrap class and that is not working for me.
ok, sorry didn’t know that. From what I see though, you haven’t added bootstrap on your codepen, All you have to do is click on the settings icon next to css, and go down to quick-add, and select bootstrap. When I opened your codepen I didn’t see it in your css settings, but when I added it everything except for the image was centered.
Thank you @P1xt, @tormundgiantsbane. I see the problem.
I have added Bootstrap lib to Javascript and now i added it to CSS section of codepen. That resolved the issue.
Thanks!
2 Likes