Issue 1:
The image below compares the code as it exists at the end of waypoint 18 on a 333px wide Chrome window, a 255px wide Firefox window and the simulator. To get the first two images I copied the code and added the necessary bootstrap / fontawesome files, and I added links above the <style> block as follows.

<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="bootstrap.min.js"></script>

A partial work around would be to use shorter button and label names. The delete button would still be chopped off, but at least things would line up. On Glitter, the advice I got was to get used to narrow phones. :) The last smart phone I had that was less than 333px wide was the original Galaxy Ace at 320px. So I'm thinking that a 350px wide simulation would cover most phones in use these days.

I have a lot of development experience, but I'm just getting started when it comes to web development, so I may have missed something obvious. In any case, I like what you're doing here. It is just what I was looking for.

Issue 2:
Hmm, I don't know why, but I am getting issues with the preview layout in the bootstrap section.

First in the buttons section : http://prntscr.com/89uesz

Then in the check box section: http://prntscr.com/89ujcq

I am sure there is no error with my code, but still I am pasting the code for it here

<link href="http://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
<style>
h2 {
font-family: Lobster, Monospace;
}

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

</style>

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