<h4 dir="auto">Add Font Awesome Icons to all of our Buttons</h4>
<p dir="auto"><a href="https://www.freecodecamp.com/challenges/add-font-awesome-icons-to-all-of-our-buttons#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Cdiv%20class%3D%22container-fluid%22%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-8%22%3E%0A%20%20%20%20%20%20%3Ch2%20class%3D%22text-primary%20text-center%22%3ECatPhotoApp%3C%2Fh2%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%3E%3Cimg%20class%3D%22img-responsive%20thick-green-border%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%20alt%3D%22A%20cute%20orange%20cat%20lying%20on%20its%20back.%20%22%3E%3C%2Fa%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cimg%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-running-cats%22%20class%3D%22img-responsive%22%20alt%3D%22Three%20kittens%20running%20towards%20the%20camera.%20%22%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-primary%22%3E%3Ci%20class%3D%22fa%20fa-thumbs-up%22%3E%3C%2Fi%3E%20Like%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-info%22%3EInfo%3Ci%20class%3D%22fa%20fa-info-circle%22%3E%3C%2Fi%3E%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-danger%22%3EDelete%3Ci%20class%3D%22fa%20fa-trash%22%3E%3C%2Fi%3E%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cp%3EThings%20cats%20%3Cspan%20class%3D%22text-danger%22%3Elove%3A%3C%2Fspan%3E%3C%2Fp%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3Ecat%20nip%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Elaser%20pointers%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Elasagna%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%20%20%3Cp%3ETop%203%20things%20cats%20hate%3A%3C%2Fp%3E%0A%20%20%3Col%3E%0A%20%20%20%20%3Cli%3Eflea%20treatment%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Ethunder%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Eother%20cats%3C%2Fli%3E%0A%20%20%3C%2Fol%3E%0A%20%20%3Cform%20fccfaa%3D%22%2Fsubmit-cat-photo%22%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Indoor%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Outdoor%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Loving%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Lazy%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Crazy%3C%2Flabel%3E%0A%20%20%20%20%3Cinput%20type%3D%22text%22%20placeholder%3D%22cat%20photo%20URL%22%20required%3E%0A%20%20%20%20%3Cbutton%20type%3D%22submit%22%3ESubmit%3C%2Fbutton%3E%0A%20%20%3C%2Fform%3E%0A%3C%2Fdiv%3E%0A" rel="nofollow">https://www.freecodecamp.com/challenges/add-font-awesome-icons-to-all-of-our-buttons#?solution=%0A%3Clink%20href%3D%22https%3A%2F%2Ffonts.googleapis.com%2Fcss%3Ffamily%3DLobster%22%20rel%3D%22stylesheet%22%20type%3D%22text%2Fcss%22%3E%0A%3Cstyle%3E%0A%20%20h2%20%7B%0A%20%20%20%20font-family%3A%20Lobster%2C%20Monospace%3B%0A%20%20%7D%0A%0A%20%20.thick-green-border%20%7B%0A%20%20%20%20border-color%3A%20green%3B%0A%20%20%20%20border-width%3A%2010px%3B%0A%20%20%20%20border-style%3A%20solid%3B%0A%20%20%20%20border-radius%3A%2050%25%3B%0A%20%20%7D%0A%3C%2Fstyle%3E%0A%0A%3Cdiv%20class%3D%22container-fluid%22%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-8%22%3E%0A%20%20%20%20%20%20%3Ch2%20class%3D%22text-primary%20text-center%22%3ECatPhotoApp%3C%2Fh2%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Ca%20href%3D%22%23%22%3E%3Cimg%20class%3D%22img-responsive%20thick-green-border%22%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-relaxing-cat%22%20alt%3D%22A%20cute%20orange%20cat%20lying%20on%20its%20back.%20%22%3E%3C%2Fa%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cimg%20src%3D%22https%3A%2F%2Fbit.ly%2Ffcc-running-cats%22%20class%3D%22img-responsive%22%20alt%3D%22Three%20kittens%20running%20towards%20the%20camera.%20%22%3E%0A%20%20%3Cdiv%20class%3D%22row%22%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-primary%22%3E%3Ci%20class%3D%22fa%20fa-thumbs-up%22%3E%3C%2Fi%3E%20Like%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-info%22%3EInfo%3Ci%20class%3D%22fa%20fa-info-circle%22%3E%3C%2Fi%3E%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%20%20%3Cdiv%20class%3D%22col-xs-4%22%3E%0A%20%20%20%20%20%20%3Cbutton%20class%3D%22btn%20btn-block%20btn-danger%22%3EDelete%3Ci%20class%3D%22fa%20fa-trash%22%3E%3C%2Fi%3E%3C%2Fbutton%3E%0A%20%20%20%20%3C%2Fdiv%3E%0A%20%20%3C%2Fdiv%3E%0A%20%20%3Cp%3EThings%20cats%20%3Cspan%20class%3D%22text-danger%22%3Elove%3A%3C%2Fspan%3E%3C%2Fp%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3Ecat%20nip%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Elaser%20pointers%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Elasagna%3C%2Fli%3E%0A%20%20%3C%2Ful%3E%0A%20%20%3Cp%3ETop%203%20things%20cats%20hate%3A%3C%2Fp%3E%0A%20%20%3Col%3E%0A%20%20%20%20%3Cli%3Eflea%20treatment%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Ethunder%3C%2Fli%3E%0A%20%20%20%20%3Cli%3Eother%20cats%3C%2Fli%3E%0A%20%20%3C%2Fol%3E%0A%20%20%3Cform%20fccfaa%3D%22%2Fsubmit-cat-photo%22%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Indoor%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22radio%22%20name%3D%22indoor-outdoor%22%3E%20Outdoor%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Loving%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Lazy%3C%2Flabel%3E%0A%20%20%20%20%3Clabel%3E%3Cinput%20type%3D%22checkbox%22%20name%3D%22personality%22%3E%20Crazy%3C%2Flabel%3E%0A%20%20%20%20%3Cinput%20type%3D%22text%22%20placeholder%3D%22cat%20photo%20URL%22%20required%3E%0A%20%20%20%20%3Cbutton%20type%3D%22submit%22%3ESubmit%3C%2Fbutton%3E%0A%20%20%3C%2Fform%3E%0A%3C%2Fdiv%3E%0A</a></p>
<h4 dir="auto">Issue Description</h4>
<p dir="auto">when you add the delete button it doesnt show, apparently the image is to large and doesnt show</p>
<h4 dir="auto">Browser Information</h4>
<p dir="auto">chrome in windows 10</p>
<ul dir="auto">
<li>Browser Name, Version: Google Chrome Versión 54.0.2840.99 m (64-bit)</li>
<li>Operating System: Windows 1064b</li>
<li>Mobile, Desktop, or Tablet: Laptop</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="
&lt;link href=&quot;https://fonts.googleapis.com/css?family=Lobster&quot; rel=&quot;stylesheet&quot; type=&quot;text/css&quot;&gt;
&lt;style&gt;
  h2 {
    font-family: Lobster, Monospace;
  }

  .thick-green-border {
    border-color: green;
    border-width: 10px;
    border-style: solid;
    border-radius: 50%;
  }
&lt;/style&gt;

&lt;div class=&quot;container-fluid&quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-xs-8&quot;&gt;
      &lt;h2 class=&quot;text-primary text-center&quot;&gt;CatPhotoApp&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-xs-4&quot;&gt;
      &lt;a href=&quot;#&quot;&gt;&lt;img class=&quot;img-responsive thick-green-border&quot; src=&quot;https://bit.ly/fcc-relaxing-cat&quot; alt=&quot;A cute orange cat lying on its back. &quot;&gt;&lt;/a&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;img src=&quot;https://bit.ly/fcc-running-cats&quot; class=&quot;img-responsive&quot; alt=&quot;Three kittens running towards the camera. &quot;&gt;
  &lt;div class=&quot;row&quot;&gt;
    &lt;div class=&quot;col-xs-4&quot;&gt;
      &lt;button class=&quot;btn btn-block btn-primary&quot;&gt;&lt;i class=&quot;fa fa-thumbs-up&quot;&gt;&lt;/i&gt; Like&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-xs-4&quot;&gt;
      &lt;button class=&quot;btn btn-block btn-info&quot;&gt;Info&lt;i class=&quot;fa fa-info-circle&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/div&gt;
    &lt;div class=&quot;col-xs-4&quot;&gt;
      &lt;button class=&quot;btn btn-block btn-danger&quot;&gt;Delete&lt;i class=&quot;fa fa-trash&quot;&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;p&gt;Things cats &lt;span class=&quot;text-danger&quot;&gt;love:&lt;/span&gt;&lt;/p&gt;
  &lt;ul&gt;
    &lt;li&gt;cat nip&lt;/li&gt;
    &lt;li&gt;laser pointers&lt;/li&gt;
    &lt;li&gt;lasagna&lt;/li&gt;
  &lt;/ul&gt;
  &lt;p&gt;Top 3 things cats hate:&lt;/p&gt;
  &lt;ol&gt;
    &lt;li&gt;flea treatment&lt;/li&gt;
    &lt;li&gt;thunder&lt;/li&gt;
    &lt;li&gt;other cats&lt;/li&gt;
  &lt;/ol&gt;
  &lt;form action=&quot;/submit-cat-photo&quot;&gt;
    &lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;indoor-outdoor&quot;&gt; Indoor&lt;/label&gt;
    &lt;label&gt;&lt;input type=&quot;radio&quot; name=&quot;indoor-outdoor&quot;&gt; Outdoor&lt;/label&gt;
    &lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;personality&quot;&gt; Loving&lt;/label&gt;
    &lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;personality&quot;&gt; Lazy&lt;/label&gt;
    &lt;label&gt;&lt;input type=&quot;checkbox&quot; name=&quot;personality&quot;&gt; Crazy&lt;/label&gt;
    &lt;input type=&quot;text&quot; placeholder=&quot;cat photo URL&quot; required&gt;
    &lt;button type=&quot;submit&quot;&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
&lt;/div&gt;

 
 
 "><pre class="notranslate"><span class="pl-c1">&lt;</span><span class="pl-ent">link</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"https://fonts.googleapis.com/css?family=Lobster"</span> <span class="pl-c1">rel</span><span class="pl-c1">=</span><span class="pl-s">"stylesheet"</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"text/css"</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>
  h2 <span class="pl-kos">{</span>
    <span class="pl-s1">font</span><span class="pl-c1">-</span><span class="pl-s1">family</span>: <span class="pl-v">Lobster</span><span class="pl-kos">,</span> <span class="pl-v">Monospace</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>

  .thick-green-border <span class="pl-kos">{</span>
    <span class="pl-s1">border</span><span class="pl-c1">-</span><span class="pl-s1">color</span>: <span class="pl-s1">green</span><span class="pl-kos">;</span>
    <span class="pl-s1">border</span><span class="pl-c1">-</span><span class="pl-s1">width</span>: <span class="pl-c1">10</span><span class="pl-s1">px</span><span class="pl-kos">;</span>
    <span class="pl-s1">border</span><span class="pl-c1">-</span><span class="pl-s1">style</span>: <span class="pl-s1">solid</span><span class="pl-kos">;</span>
    <span class="pl-s1">border</span><span class="pl-c1">-</span><span class="pl-s1">radius</span>: <span class="pl-c1">50</span><span class="pl-c1">%</span><span class="pl-kos">;</span>
  <span class="pl-kos">}</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">style</span><span class="pl-c1">&gt;</span>

<span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"container-fluid"</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"row"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"col-xs-8"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">h2</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"text-primary text-center"</span><span class="pl-c1">&gt;</span>CatPhotoApp<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">h2</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"col-xs-4"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">a</span> <span class="pl-c1">href</span><span class="pl-c1">=</span><span class="pl-s">"#"</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"img-responsive thick-green-border"</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-s">"https://bit.ly/fcc-relaxing-cat"</span> <span class="pl-c1">alt</span><span class="pl-c1">=</span><span class="pl-s">"A cute orange cat lying on its back. "</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">a</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">img</span> <span class="pl-c1">src</span><span class="pl-c1">=</span><span class="pl-s">"https://bit.ly/fcc-running-cats"</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"img-responsive"</span> <span class="pl-c1">alt</span><span class="pl-c1">=</span><span class="pl-s">"Three kittens running towards the camera. "</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"row"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"col-xs-4"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"btn btn-block btn-primary"</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">i</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"fa fa-thumbs-up"</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">i</span><span class="pl-c1">&gt;</span> Like<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"col-xs-4"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"btn btn-block btn-info"</span><span class="pl-c1">&gt;</span>Info<span class="pl-c1">&lt;</span><span class="pl-ent">i</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"fa fa-info-circle"</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">i</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">div</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"col-xs-4"</span><span class="pl-c1">&gt;</span>
      <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"btn btn-block btn-danger"</span><span class="pl-c1">&gt;</span>Delete<span class="pl-c1">&lt;</span><span class="pl-ent">i</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"fa fa-trash"</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">i</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Things cats <span class="pl-c1">&lt;</span><span class="pl-ent">span</span> <span class="pl-c1">class</span><span class="pl-c1">=</span><span class="pl-s">"text-danger"</span><span class="pl-c1">&gt;</span>love:<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">span</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">ul</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>cat nip<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>laser pointers<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>lasagna<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">ul</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>Top 3 things cats hate:<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">p</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">ol</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>flea treatment<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>thunder<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>other cats<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">li</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">ol</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-ent">form</span> <span class="pl-c1">action</span><span class="pl-c1">=</span><span class="pl-s">"/submit-cat-photo"</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"radio"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"indoor-outdoor"</span><span class="pl-c1">&gt;</span> Indoor<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"radio"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"indoor-outdoor"</span><span class="pl-c1">&gt;</span> Outdoor<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"checkbox"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"personality"</span><span class="pl-c1">&gt;</span> Loving<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"checkbox"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"personality"</span><span class="pl-c1">&gt;</span> Lazy<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span><span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"checkbox"</span> <span class="pl-c1">name</span><span class="pl-c1">=</span><span class="pl-s">"personality"</span><span class="pl-c1">&gt;</span> Crazy<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">label</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">input</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"text"</span> <span class="pl-c1">placeholder</span><span class="pl-c1">=</span><span class="pl-s">"cat photo URL"</span> <span class="pl-c1">required</span><span class="pl-c1">&gt;</span>
    <span class="pl-c1">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">type</span><span class="pl-c1">=</span><span class="pl-s">"submit"</span><span class="pl-c1">&gt;</span>Submit<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">button</span><span class="pl-c1">&gt;</span>
  <span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">form</span><span class="pl-c1">&gt;</span>
<span class="pl-c1">&lt;</span><span class="pl-c1">/</span><span class="pl-ent">div</span><span class="pl-c1">&gt;</span>

 
 
 </pre></div>
<h4 dir="auto">Screenshot</h4>
<p dir="auto">Forewarning, this <em>may</em> be bike-shedding worthy....</p>
<h3 dir="auto">Workspace</h3>
<p dir="auto">User Agent is: <code class="notranslate">Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36</code>. (Chrome on Windows 7)</p>
<h3 dir="auto">Setting</h3>
<p dir="auto">The CatPhoto is where you make an web page and one component is adding three buttons like below.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2754821/14199337/7156ec7e-f798-11e5-864c-49dd8c334c40.png"><img src="https://cloud.githubusercontent.com/assets/2754821/14199337/7156ec7e-f798-11e5-864c-49dd8c334c40.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">Problem</h3>
<p dir="auto">But then you will eventually make it into something like this below.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2754821/14199333/641738c0-f798-11e5-9464-43c6de465704.png"><img src="https://cloud.githubusercontent.com/assets/2754821/14199333/641738c0-f798-11e5-9464-43c6de465704.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Notice that the red Delete button is squished and on the side (this is mostly a desktop problem; mobile user won't have the same issue -- see below)</p>
<h4 dir="auto">Mobile Version</h4>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2754821/14199436/364c3a70-f799-11e5-98af-7dbe7da0fbb1.png"><img src="https://cloud.githubusercontent.com/assets/2754821/14199436/364c3a70-f799-11e5-98af-7dbe7da0fbb1.png" alt="image" style="max-width: 100%;"></a></p>
<h3 dir="auto">Solution</h3>
<p dir="auto">So I propose two things:</p>
<ul dir="auto">
<li>Change the "Delete" button into a "Edit" button so it'll fit on the button better.
<ul dir="auto">
<li>This is fairly easy. You'll just need to change this in the challenge seeds starting with the challenge <a href="https://www.freecodecamp.com/challenges/warn-your-users-of-a-dangerous-action" rel="nofollow">Warn your Users of a Dangerous Action</a> where the button is added.</li>
<li>Then change the challenges up until the last one on <a href="https://www.freecodecamp.com/challenges/line-up-form-elements-responsively-with-bootstrap" rel="nofollow">Line up Form Elements Responsively with Bootstrap</a>.</li>
<li>You could also change the icon if appropriate.</li>
</ul>
</li>
<li>Add new challenge to add in making all three of those buttons also have the class <code class="notranslate">btn-sm</code> to make the text inside the button not seem all smushed.
<ul dir="auto">
<li>This one will require a little more effort in making an entirely new challenge, which may be unnecessary.</li>
</ul>
</li>
</ul>
<p dir="auto">Example:</p>
<div class="highlight highlight-text-html-basic notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="&lt;button class=&quot;btn btn-block btn-info btn-sm&quot;&gt;&lt;i class=&quot;fa fa-info-circle&quot;&gt;&lt;/i&gt; Info&lt;/button&gt;"><pre class="notranslate"><span class="pl-kos">&lt;</span><span class="pl-ent">button</span> <span class="pl-c1">class</span>="<span class="pl-s">btn btn-block btn-info btn-sm</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;</span><span class="pl-ent">i</span> <span class="pl-c1">class</span>="<span class="pl-s">fa fa-info-circle</span>"<span class="pl-kos">&gt;</span><span class="pl-kos">&lt;/</span><span class="pl-ent">i</span><span class="pl-kos">&gt;</span> Info<span class="pl-kos">&lt;/</span><span class="pl-ent">button</span><span class="pl-kos">&gt;</span></pre></div>
<p dir="auto">If the proposed changes were made, the finished app will look like this:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/2754821/14199509/e3e483d6-f799-11e5-8983-b02a50d68da7.png"><img src="https://cloud.githubusercontent.com/assets/2754821/14199509/e3e483d6-f799-11e5-8983-b02a50d68da7.png" alt="image" style="max-width: 100%;"></a></p>