<p dir="auto"><a href="https://gyazo.com/3644a25b78339407d0a14c37426258fa" rel="nofollow"><img src="https://camo.githubusercontent.com/047c4ce84c1cbdde466df9badfaa9e9f585c4e14b8b333c5ff4ceaa59220223d/68747470733a2f2f692e6779617a6f2e636f6d2f33363434613235623738333339343037643061313463333734323632353866612e706e67" alt="https://gyazo.com/3644a25b78339407d0a14c37426258fa" data-canonical-src="https://i.gyazo.com/3644a25b78339407d0a14c37426258fa.png" style="max-width: 100%;"></a></p>
<p dir="auto">Adding required files for a challenge or a challange block requires adding the 'required' key to the challenge or challenge block.</p>
<p dir="auto">See:<br>
<a href="https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/seed/challenges/01-front-end-development-certification/bootstrap.json#L6">https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/seed/challenges/01-front-end-development-certification/bootstrap.json#L6</a><br>
<a href="https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/common/models/challenge.json#L110">https://github.com/FreeCodeCamp/FreeCodeCamp/blob/staging/common/models/challenge.json#L110</a></p>
<p dir="auto">This is an example of how to add it to a whole block.</p>
<div class="highlight highlight-source-json notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="{
  &quot;name&quot;: &quot;Responsive Design with Bootstrap&quot;,
  &quot;order&quot;: 3,
  &quot;time&quot;: &quot;5 hours&quot;,
  &quot;helpRoom&quot;: &quot;Help&quot;,
  &quot;required&quot;: [
    { &quot;link&quot;: &quot;https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css&quot; }
  ],
  &quot;challenges&quot;: [
    {
      &quot;id&quot;: &quot;bad87fee1348bd9acde08712&quot;,
      &quot;title&quot;: &quot;Use Responsive Design with Bootstrap Fluid Containers&quot;,
      &quot;description&quot;: [
        &quot;In the HTML5 and CSS section of FreeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.&quot;,
        &quot;Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name &lt;code&gt;Responsive Design&lt;/code&gt;.&quot;,
        &quot;With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.&quot;,
        &quot;You can add Bootstrap to any app by adding the following code to the top of your HTML:&quot;,
        &quot;&lt;code&gt;&amp;#60;link rel=\&quot;stylesheet\&quot; href=\&quot;//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css\&quot;/&amp;#62;&lt;/code&gt;&quot;,
        &quot;In this case, we've already added it for you to this page behind the scenes.&quot;,
        &quot;To get started, we should nest all of our HTML in a &lt;code&gt;div&lt;/code&gt; element with the class &lt;code&gt;container-fluid&lt;/code&gt;.&quot;
      ],"><pre class="notranslate">{
  <span class="pl-ent">"name"</span>: <span class="pl-s"><span class="pl-pds">"</span>Responsive Design with Bootstrap<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"order"</span>: <span class="pl-c1">3</span>,
  <span class="pl-ent">"time"</span>: <span class="pl-s"><span class="pl-pds">"</span>5 hours<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"helpRoom"</span>: <span class="pl-s"><span class="pl-pds">"</span>Help<span class="pl-pds">"</span></span>,
  <span class="pl-ent">"required"</span>: [
    { <span class="pl-ent">"link"</span>: <span class="pl-s"><span class="pl-pds">"</span>https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css<span class="pl-pds">"</span></span> }
  ],
  <span class="pl-ent">"challenges"</span>: [
    {
      <span class="pl-ent">"id"</span>: <span class="pl-s"><span class="pl-pds">"</span>bad87fee1348bd9acde08712<span class="pl-pds">"</span></span>,
      <span class="pl-ent">"title"</span>: <span class="pl-s"><span class="pl-pds">"</span>Use Responsive Design with Bootstrap Fluid Containers<span class="pl-pds">"</span></span>,
      <span class="pl-ent">"description"</span>: [
        <span class="pl-s"><span class="pl-pds">"</span>In the HTML5 and CSS section of FreeCodeCamp we built a Cat Photo App. Now let's go back to it. This time, we'll style it using the popular Bootstrap responsive CSS framework.<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name &lt;code&gt;Responsive Design&lt;/code&gt;.<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>You can add Bootstrap to any app by adding the following code to the top of your HTML:<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>&lt;code&gt;&amp;#60;link rel=<span class="pl-cce">\"</span>stylesheet<span class="pl-cce">\"</span> href=<span class="pl-cce">\"</span>//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css<span class="pl-cce">\"</span>/&amp;#62;&lt;/code&gt;<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>In this case, we've already added it for you to this page behind the scenes.<span class="pl-pds">"</span></span>,
        <span class="pl-s"><span class="pl-pds">"</span>To get started, we should nest all of our HTML in a &lt;code&gt;div&lt;/code&gt; element with the class &lt;code&gt;container-fluid&lt;/code&gt;.<span class="pl-pds">"</span></span>
      ],</pre></div>