<h4 dir="auto">Challenge Name</h4>
<p dir="auto"><a href="https://www.freecodecamp.com/challenges/build-a-tribute-page" rel="nofollow">Build a Tribute Page</a></p>
<h4 dir="auto">Issue Description</h4>
<p dir="auto">Please update <a href="https://www.freecodecamp.com/challenges/get-set-for-our-front-end-development-projects" rel="nofollow">this step</a> in the instructions for setting up CodePen? <a href="https://youtu.be/qqrnzmqCGDw?t=3m53s" rel="nofollow">Also in the video</a>.</p>
<p dir="auto">Adding Bootstrap to CodePen now defaults to the alpha of V4 of Bootstrap, so the Bootstrap V3 code that I learned on FCC (like my columns) wasn't working originally. Maybe let others know and encourage them to add Bootstrap to CodePen with this link?: <a href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="nofollow">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</a> Might save them some time. Thank you!</p>
<h4 dir="auto">Browser Information</h4>

<ul dir="auto">
<li>Browser Name, Version: Chrome Version 57.0.2987.98 (64-bit)</li>
<li>Operating System: Mac OS 10.12.3 (16D32)</li>
<li>Mobile, Desktop, or Tablet: Desktop</li>
</ul>
<h4 dir="auto">Your Code</h4>

<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="

"><pre class="notranslate"></pre></div>
<h4 dir="auto">Screenshot</h4>
<h4 dir="auto">Challenge Name</h4>
<p dir="auto"><a href="https://www.freecodecamp.com/challenges/get-set-for-our-front-end-development-projects" rel="nofollow">https://www.freecodecamp.com/challenges/get-set-for-our-front-end-development-projects</a></p>
<h4 dir="auto">Issue Description</h4>
<p dir="auto">As of today Codpen default quick-add is Bootstrap.4 which has some differences from the 3.3.7 version that gets taught during the lessons.</p>
<p dir="auto">I have noticed and increased number of Camper asking for help in chat asking why their code was not behaving as expected all due to them using version 4.</p>
<p dir="auto">I propose to amend the description and provide the link to the version 3.3.7 and let the camper insert that.</p>
<p dir="auto">It's also worth mentioning that in case we proceed with this change we have to change the <code class="notranslate">.gif</code> accordingly.</p>
<hr>
<p dir="auto">[edit]<br>
The text I'm referring to is at step 6/7:</p>
<blockquote>
<p dir="auto">Click the gear in the upper left hand corner of the CSS box, then scroll down to "Quick add" and choose Bootstrap.</p>
</blockquote>
<p dir="auto">By doing so the camper will inevitably add the version 4.<br>
We could change it with:</p>
<blockquote>
<p dir="auto">Click the gear in the upper left hand corner of the CSS box, then in the text field add this link<br>
<code class="notranslate">https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css</code>.</p>
</blockquote>
<p dir="auto">And perhaps leaving a note that using the dropdown will load the Alpha version, advising that may encounter some differences in syntax with the lessons's examples.</p>