Update CatPhotoApp for better appearance

Forewarning, this may be bike-shedding worthy…

Workspace

User Agent is: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/49.0.2623.110 Safari/537.36. (Chrome on Windows 7)

Setting

The CatPhoto is where you make an web page and one component is adding three buttons like below.

Problem

But then you will eventually make it into something like this below.

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)

Mobile Version

Solution

So I propose two things:

• Change the “Delete” button into a “Edit” button so it’ll fit on the button better.
  • This is fairly easy. You’ll just need to change this in the challenge seeds starting with the challenge Warn your Users of a Dangerous Action where the button is added.
  • Then change the challenges up until the last one on Line up Form Elements Responsively with Bootstrap.
  • You could also change the icon if appropriate.
• Add new challenge to add in making all three of those buttons also have the class btn-sm to make the text inside the button not seem all smushed.
  • This one will require a little more effort in making an entirely new challenge, which may be unnecessary.

Example:

<button class="btn btn-block btn-info btn-sm"><i class="fa fa-info-circle"></i> Info</button>

If the proposed changes were made, the finished app will look like this:

[andrewtdinh]

Hi there,

As long as you guys are looking into UI issues on the simulated view, maybe you can also fix the breaking into two lines of the ‘Loving’ checkbox:

[jnmorse]

how about changing the buttons to be inside a button group

  <div class="row">
    <div class="col-xs-12">
      <div class="btn-group btn-group-justified" role="group">
        <div class="btn-group" role="group">
          <button class="btn btn-primary"><i class="fa fa-thumbs-up"></i> Like</button>
        </div>
        <div class="btn-group" role="group">
          <button class="btn btn-info"><i class="fa fa-info-circle"></i> Info</button>
        </div>
        <div class="btn-group" role="group">
          <button class="btn btn-danger"><i class="fa fa-trash"></i> Delete</button>
        </div>
      </div>
    </div>

apparently the btn-group around each buttons is nessary when using actual buttons and not anchor elements… [Bootstrap: button groups justified](http://getbootstrap.com/components/#btn-groups- justified)

I believe .btn-block is meant to for full-width buttons so it is perhaps not playing nice with .col-xs-4

Sorry noticed this was supposed to be about using the grid, and not just making the buttons look nicer.