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

<p dir="auto"><a href="https://www.freecodecamp.com/challenges/line-up-form-elements-responsively-with-bootstrap" rel="nofollow">https://www.freecodecamp.com/challenges/line-up-form-elements-responsively-with-bootstrap</a></p>
<h4 dir="auto">Issue Description</h4>

<p dir="auto">The Like, Info, and Delete buttons need more padding on the right side.  Also, the 'Loving' checkbox label should be on the same line as the checkbox that it labels.  Also, shouldn't the Submit button be on the same line as the text input?</p>
<h4 dir="auto">Browser Information</h4>

<ul dir="auto">
<li>Browser Name, Version:  Chrome, Version 50.0.2661.94 (64-bit)</li>
<li>Operating System: Mac OSX, Yosemite, version 10.10.5</li>
<li>Mobile, Desktop, or Tablet: Mac Book Pro 15"</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="// If relevant, paste all of your challenge code in here
"><pre class="notranslate"><span class="pl-c">// If relevant, paste all of your challenge code in here</span></pre></div>
<h4 dir="auto">Screenshot</h4>

<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://cloud.githubusercontent.com/assets/11606611/15237189/74ec60b8-1880-11e6-90ea-66ae491915e1.png"><img src="https://cloud.githubusercontent.com/assets/11606611/15237189/74ec60b8-1880-11e6-90ea-66ae491915e1.png" alt="image" 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>