<h4 dir="auto">Challenge Name</h4>

<p dir="auto"><a href="https://www.freecodecamp.com/challenges/add-font-awesome-icons-to-all-of-our-buttons#" rel="nofollow">https://www.freecodecamp.com/challenges/add-font-awesome-icons-to-all-of-our-buttons#</a>?</p>
<h4 dir="auto">Issue Description</h4>

<p dir="auto">when adding the trash glyphicon, "Delete" text is cut off due to padding from "container" class.</p>
<h4 dir="auto">Browser Information</h4>

<p dir="auto">using macbook with 13inch screen</p>
<ul dir="auto">
<li>Browser Name, Version:<br>
Google Chrome</li>
<li>Operating System: El Capitan OSX<br>
Desktop</li>
</ul>
<h4 dir="auto">Screenshot</h4>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/16691984/18424066/d1f9337c-7879-11e6-8488-55592f343713.png"><img src="https://cloud.githubusercontent.com/assets/16691984/18424066/d1f9337c-7879-11e6-8488-55592f343713.png" alt="screen shot 2016-09-11 at 11 44 24 pm" style="max-width: 100%;"></a></p>
<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>