Trouble making img-responsive

1

Hi all!!

I’m just getting started and am enjoying the process so far, but I’ve run into some issues. It doesn’t seem like Bootstrap is loading everything properly, as for instance I’ve had trouble making my image responsive and central using “text-center” inside a row. I copied someone else’s code in CSS to center the image and have it match at 100% but I would prefer to use “img-responsive” and “text-center” inline. Any ideas on what could be causing this?

2

Pippa’s great!

If you replace the img-responsive class with the img-fluid class, does that give you the effect you’re after?

D.

3 Likes
3

If you are curious why this image-responsive is not working and img-fluid is working, it is because Codepen now is using Bootstrap v4 instead of v3.

https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.min.css

2 Likes
4

Thanks both of you! the img-fluid definitely does what I need it to.

It was very frustrating because it seemed like it didn’t want to do what had just been learned in FCC. I did see someone in a forum talking about version 4, but I wasn’t sure it applied to this case.

As for text-center, I applied that to a div element instead and it works a charm! The only issue I’m having right now is the following appearing at the top of my mobile page but not on the chrome version:

">

As If I had added this by mistake and so it was showing up as text.

1 Like
5

Aha! I caught the culprit. I had added my google font inline, and then moved it to setting to streamline my code. BUT I didn’t take out my start and end brackets, so the "> would still show up at the top of my page (for some reason only in mobile). In any case, I got rid of it now so it’s so far working how I want it to.

2 Likes
6

I had no idea!
That explains why I’ve been having so many issues!

7

I ran into the same issue, trying to use the Bootstrap guide thats up, which is V3, while CodePen was using v4.

I did find a good work around though. I removed the auto-include Bootstrap in the settings. and instead put in the link for Bootstrap v3.

1 Like
8

This explains everything, I couldn’t get anything to work on the first project.

9

Smart!

I just wound up going back and adjusting mine to bootstrap v4 XP