Freecodecamp: Quick-add of bootstrap in codepen adds bootstrap V4

[RichardHerzog]

Challenge Build a Tribute Page has an issue.
User Agent is: Mozilla/5.0 (Windows NT 6.3; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/56.0.2924.87 Safari/537.36.

As shown in the video, I added bootstrap to my codepen project for the tribute page. By default codepen (currently) uses the following version:

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

As documented here and as discussed here, img-responsive was replaced by img-fluid. I tried to use img-responsive in the tribute page, but of course, that didn't work. It took me a while to figure out that I had to use img-fluid with bootstrap version 4.

A little hint on the challenge page might be nice to either use bootstrap version 3 or check what has changed in V4 compared to V3.

[Greenheart]

@RichardHerzog Thanks for reporting this issue!

A hint on the webpage would be helpful, but I'm not sure where to add it so that as many as possible would see it.

Another option could be to update the challenge about responsive images (and probably the other Bootstrap challenges as well) once Bootstrap 5 is released.

[RichardHerzog]

@Greenheart I'd put a hint right below the video, since it shows the quick-add feature. Alternatively, or even in addtion, one could put a hint in the precedent challenge (slide 6/7), where the quick-add feature is also shown.

[Greenheart]

@RichardHerzog What video?

The slides would be a great place to add this tip, since it already has related information :+1:
Since you reported this, maybe you would like to fix this? Me and other contributors would be happy to guide you through the process :blush:

This is the introduction challenge on the beta site (where development of the new curriculum happens). To add this improvement, this line is what becomes the text of slide 6/7

To help you get started, CONTRIBUTING.md walks you through how to set up your local environment all the way to how to submit a pull request.

If you have any questions, please come chat with us in the Contributors Chat Room.

Happy Coding! :smile:

[Parad0xJ]

@RichardHerzog

Hello,
you know how to solve your problem is very simple. Just do as I do. Keep in mind that Bootsrap version 4 is not completely stable, I do not use it.
All you have to do is go to the Settings of Codepen css tab you delete the cdn of bootstrap 4 set by default and copy / paste the last stable version of bootstrap. this one : https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css
Idem for bootstrap javascript if you need

Sorry for my bad english ;)

[RichardHerzog]

@Parad0xJ
Yeah, I know. I'm just raising this issue in order to prevent that other students get stuck with this issue, too. I guess that I'm not the only one who is using the quick-add feature 'blindly' and then wondering why some bootstrap classes won't work although I'm doing it like in the challenges before.

@Greenheart
I somehow brought FCC to work on my machine, changed the mentioned line and commited the change to my fork of FCC. But I'm hesitating to create a PR because the current structure of the challenges (in branch staging) changed so that the bootstrap challenges are now way after the tribute page challenge, which makes mentioning the quick-add feature to add bootstrap obsolete in the tribute page challenge. You get what I'm trying to say? 😄

[Parad0xJ]

ok, I think you don't know that no problem

[Greenheart]

@RichardHerzog Great job, but I'm sorry for not mentioning the new curriculum we're working on over at https://beta.freecodecamp.com.

I guess we don't need this change anymore :confused:

As a side note, I'd recommend anyone to learn CSS and create a few projects with it before trying anything else like Sass, Bootstrap etc (which are based on CSS). The foundations of the web will give better knowledge in the long run.

[RichardHerzog]

@Greenheart
Ok. Shouldn't the slide itself be deleted then?

Regarding your side note: I totally agree on learning basics before utilizing higher level stuff. But on the other hand, sometimes it's easier to learn with a top-down approach (or system approach). It keeps you motivated because you get results really fast :)

[Greenheart]

@I think we still need to show how to use CodePen but I'm not sure. It's definitely a good thought!

That's true, it depends on what kind of learner one are. Some learn best by getting results, while others only learn how to use tools while not understanding the theory behind them :blush:

[RichardHerzog]

@Greenheart Yeah that makes sense. I guess that with the new order of challenges people won't be using bootstrap at this point anyway. Therefore closing the issue.

[autopoieticworld]

Hi, I lost the whole day with that bootstrap 4 bug.
I would kindly suggest that meanwhile the beta is not released, complete the solution, a hint, whatever, to make it go smooth for students.
Cheers,
Diego

[faisalmukhtarch]

Thanks @Parad0xJ
It worked like a charm