From b579317e11fbaf9784e52fa4bb3d5219eb177168 Mon Sep 17 00:00:00 2001
From: Manish Giri <manish.giri.me@gmail.com>
Date: Thu, 2 May 2019 05:24:38 -0400
Subject: [PATCH] fix(curriculum): Add solutions to Bootstrap challenges
 (#35789)

* fix(curriculum): Add solutions to Bootstrap challenges
---
 ...-default-bootstrap-button-style.english.md | 22 ++++-
 ...-optional-actions-with-btn-info.english.md | 63 ++++++++++++++-
 ...-block-element-bootstrap-button.english.md | 61 +++++++++++++-
 .../create-a-bootstrap-row.english.md         |  7 +-
 ...to-target-with-jquery-selectors.english.md | 22 ++++-
 .../create-a-custom-heading.english.md        | 61 +++++++++++++-
 .../create-bootstrap-wells.english.md         | 14 +++-
 .../ditch-custom-css-for-bootstrap.english.md | 56 ++++++++++++-
 .../give-each-element-a-unique-id.english.md  | 24 +++++-
 ...a-bootstrap-container-fluid-div.english.md |  6 +-
 .../label-bootstrap-buttons.english.md        | 24 +++++-
 .../label-bootstrap-wells.english.md          | 24 +++++-
 ...nts-responsively-with-bootstrap.english.md | 81 ++++++++++++++++++-
 .../make-images-mobile-responsive.english.md  | 60 +++++++++++++-
 .../responsively-style-checkboxes.english.md  | 75 ++++++++++++++++-
 ...esponsively-style-radio-buttons.english.md | 66 ++++++++++++++-
 .../split-your-bootstrap-row.english.md       | 10 ++-
 ...le-text-inputs-as-form-controls.english.md | 75 ++++++++++++++++-
 ...-bootstrap-button-color-rainbow.english.md | 61 +++++++++++++-
 ...-span-to-target-inline-elements.english.md | 58 ++++++++++++-
 .../use-comments-to-clarify-code.english.md   | 25 +++++-
 ...with-bootstrap-fluid-containers.english.md | 58 ++++++++++++-
 ...angerous-action-with-btn-danger.english.md | 63 ++++++++++++++-
 23 files changed, 970 insertions(+), 46 deletions(-)

diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.english.md
index cc4221e82d..96e3d19949 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/apply-the-default-bootstrap-button-style.english.md
@@ -65,7 +65,25 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+        <button class="btn btn-default"></button>
+      </div>
+    </div>
+  </div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.english.md
index 68d622ddbe..ad9b82b701 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/call-out-optional-actions-with-btn-info.english.md
@@ -109,7 +109,66 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-primary">Like</button>
+  <button class="btn btn-block btn-info">Info</button>
+
+  <p>Things cats love:</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">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.english.md
index 91324f157e..71ef523fd1 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-block-element-bootstrap-button.english.md
@@ -114,7 +114,64 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-default">Like</button>
+  <p>Things cats love:</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">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.english.md
index f766f07c62..bb22b06306 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-bootstrap-row.english.md
@@ -55,7 +55,10 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row"></div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.english.md
index 03759dfd9f..9e24240eed 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-class-to-target-with-jquery-selectors.english.md
@@ -63,7 +63,25 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="target btn btn-default"></button>
+        <button class="target btn btn-default"></button>
+        <button class="target btn btn-default"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well">
+        <button class="target btn btn-default"></button>
+        <button class="target btn btn-default"></button>
+        <button class="target btn btn-default"></button>
+      </div>
+    </div>
+  </div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.english.md
index 7c27322c68..7b96bb8bd4 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-a-custom-heading.english.md
@@ -106,7 +106,64 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://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" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">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">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.english.md
index b95f822569..223e1b9aeb 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/create-bootstrap-wells.english.md
@@ -59,7 +59,17 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <div class="well"></div>
+    </div>
+    <div class="col-xs-6">
+      <div class="well"></div>
+    </div>
+  </div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.english.md
index 77293f6f2c..d3b1ffce9a 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/ditch-custom-css-for-bootstrap.english.md
@@ -123,7 +123,59 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://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">
+  <h2 class="text-primary text-center">CatPhotoApp</h2>
+
+  <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">Delete</button>
+    </div>
+  </div>
+  <p>Things cats love:</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">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.english.md
index 28f444d574..8fbb007425 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/give-each-element-a-unique-id.english.md
@@ -76,7 +76,27 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1"></button>
+        <button class="btn btn-default target" id="target2"></button>
+        <button class="btn btn-default target" id="target3"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4"></button>
+        <button class="btn btn-default target" id="target5"></button>
+        <button class="btn btn-default target" id="target6"></button>
+      </div>
+    </div>
+  </div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.english.md
index 1c3754e59e..84e7b2807c 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/house-our-page-within-a-bootstrap-container-fluid-div.english.md
@@ -51,7 +51,9 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<div class="container-fluid">
+    <h3 class="text-primary text-center">jQuery Playground</h3>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.english.md
index b35d1342c8..a2e1e7dc32 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-buttons.english.md
@@ -75,7 +75,27 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.english.md
index 1881882eca..eaae7a2a5a 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/label-bootstrap-wells.english.md
@@ -72,7 +72,27 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+        <button class="btn btn-default target"></button>
+      </div>
+    </div>
+  </div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.english.md
index 4d4c8871aa..5ae45068e4 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/line-up-form-elements-responsively-with-bootstrap.english.md
@@ -126,7 +126,84 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://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" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <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>
+    <div class="row">
+      <div class="col-xs-7">
+        <input type="text" class="form-control" placeholder="cat photo URL" required>
+      </div>
+      <div class="col-xs-5">
+        <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i> Submit</button>
+      </div>
+    </div>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.english.md
index e1ed0fda6e..8b807d5a3e 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/make-images-mobile-responsive.english.md
@@ -109,7 +109,63 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive">
+
+  <p>Things cats love:</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">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.english.md
index 67abc36d79..1ece806483 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-checkboxes.english.md
@@ -114,7 +114,78 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://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" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <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>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.english.md
index 46e14477a6..9f406be911 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/responsively-style-radio-buttons.english.md
@@ -109,7 +109,69 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://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" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <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>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.english.md
index 95e52d0cd7..488010d355 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/split-your-bootstrap-row.english.md
@@ -53,7 +53,13 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6"></div>
+    <div class="col-xs-6"></div>
+  </div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.english.md
index de27021af0..cfe90e9d2b 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/style-text-inputs-as-form-controls.english.md
@@ -126,7 +126,78 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://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" alt="A cute orange cat lying on its back."></a>
+    </div>
+  </div>
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <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" class="form-control" placeholder="cat photo URL" required>
+    <button type="submit" class="btn btn-primary"><i class="fa fa-paper-plane"></i>Submit</button>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md
index 37c436eb79..581d7d3803 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/taste-the-bootstrap-button-color-rainbow.english.md
@@ -107,7 +107,64 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-primary btn-block">Like</button>
+  <p>Things cats love:</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">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.english.md
index e44f861c45..f9da35f843 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-a-span-to-target-inline-elements.english.md
@@ -111,7 +111,61 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://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">
+  <h2 class="text-primary text-center">CatPhotoApp</h2>
+
+  <a href="#"><img class="img-responsive thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <div class="row">
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-primary">Like</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-info">Info</button>
+    </div>
+    <div class="col-xs-4">
+      <button class="btn btn-block btn-danger">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">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md
index a0b925f782..3be15df963 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-comments-to-clarify-code.english.md
@@ -73,7 +73,28 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<!-- Only change code above this line. -->
+<div class="container-fluid">
+  <h3 class="text-primary text-center">jQuery Playground</h3>
+  <div class="row">
+    <div class="col-xs-6">
+      <h4>#left-well</h4>
+      <div class="well" id="left-well">
+        <button class="btn btn-default target" id="target1">#target1</button>
+        <button class="btn btn-default target" id="target2">#target2</button>
+        <button class="btn btn-default target" id="target3">#target3</button>
+      </div>
+    </div>
+    <div class="col-xs-6">
+      <h4>#right-well</h4>
+      <div class="well" id="right-well">
+        <button class="btn btn-default target" id="target4">#target4</button>
+        <button class="btn btn-default target" id="target5">#target5</button>
+        <button class="btn btn-default target" id="target6">#target6</button>
+      </div>
+    </div>
+  </div>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md
index a4832cdfd4..0891846868 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/use-responsive-design-with-bootstrap-fluid-containers.english.md
@@ -107,7 +107,61 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+<div class="container-fluid">
+  <h2 class="red-text">CatPhotoApp</h2>
+
+<p>Click here for <a href="#">cat photos</a>.</p>
+
+<a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+<p>Things cats love:</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">
+  <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+  <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+  <label><input type="checkbox" name="personality"> Loving</label>
+  <label><input type="checkbox" name="personality"> Lazy</label>
+  <label><input type="checkbox" name="personality"> Crazy</label>
+  <input type="text" placeholder="cat photo URL" required>
+  <button type="submit">Submit</button>
+</form>
+</div>
 ```
 </section>
diff --git a/curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.english.md b/curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.english.md
index bdde82947f..08af9f4004 100644
--- a/curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.english.md
+++ b/curriculum/challenges/english/03-front-end-libraries/bootstrap/warn-your-users-of-a-dangerous-action-with-btn-danger.english.md
@@ -110,7 +110,66 @@ tests:
 ## Solution
 <section id='solution'>
 
-```js
-// solution required
+```html
+<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">
+<style>
+  .red-text {
+    color: red;
+  }
+
+  h2 {
+    font-family: Lobster, Monospace;
+  }
+
+  p {
+    font-size: 16px;
+    font-family: Monospace;
+  }
+
+  .thick-green-border {
+    border-color: green;
+    border-width: 10px;
+    border-style: solid;
+    border-radius: 50%;
+  }
+
+  .smaller-image {
+    width: 100px;
+  }
+</style>
+
+<div class="container-fluid">
+  <h2 class="red-text text-center">CatPhotoApp</h2>
+
+  <p>Click here for <a href="#">cat photos</a>.</p>
+
+  <a href="#"><img class="smaller-image thick-green-border" src="https://bit.ly/fcc-relaxing-cat" alt="A cute orange cat lying on its back."></a>
+
+  <img src="https://bit.ly/fcc-running-cats" class="img-responsive" alt="Three kittens running towards the camera.">
+  <button class="btn btn-block btn-primary">Like</button>
+  <button class="btn btn-block btn-info">Info</button>
+  <button class="btn btn-block btn-danger">Delete</button>
+  <p>Things cats love:</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">
+    <label><input type="radio" name="indoor-outdoor"> Indoor</label>
+    <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
+    <label><input type="checkbox" name="personality"> Loving</label>
+    <label><input type="checkbox" name="personality"> Lazy</label>
+    <label><input type="checkbox" name="personality"> Crazy</label>
+    <input type="text" placeholder="cat photo URL" required>
+    <button type="submit">Submit</button>
+  </form>
+</div>
 ```
 </section>