diff --git a/seed/challenges/bootstrap.json b/seed/challenges/bootstrap.json
index a8b417283b..d71bd78947 100644
--- a/seed/challenges/bootstrap.json
+++ b/seed/challenges/bootstrap.json
@@ -3,22 +3,20 @@
"order": 0.003,
"challenges": [
{
- "id": "bad87fee1348bd9acde08812",
- "name": "Waypoint: Mobile Responsive Images",
- "dashedName": "waypoint-mobile-responsive-images",
+ "id": "bad87fee1348bd9acde08712",
+ "name": "Waypoint: Use Responsive Design with Bootstrap Fluid Containers",
+ "dashedName": "waypoint-use-responsive-design-with-bootstrap-fluid-containers",
"difficulty": 1,
"description": [
- "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework. First, add a new image with the src
attribute of \"http://bit.ly/fcc-kittens2\", and add the \"img-responsive\" Bootstrap class to that image.",
- "It would be great if the image could be exactly the width of our phone's screen.",
- "Fortunately, we have access to a Responsive CSS Framework called Bootstrap. You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/>
at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.",
+ "Now let's go back to our Cat Photo App. This time, we'll style it using the popular Bootstrap responsive CSS framework.",
"Bootstrap will figure out how wide your screen is and respond by resizing your HTML elements - hence the name Responsive Design
.",
"With responsive design, there is no need to design a mobile version of your website. It will look good on devices with screens of any width.",
- "Now all you need to do is add the \"img-responsive\" class to your image."
+ "You can add Bootstrap to any app just by including it with <link rel='stylesheet' href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css'/>
at the top of your HTML. But we've gone ahead and automatically added it to your Cat Photo App for you.",
+ "To get started, we should wrap all of our HTML in a div
element with the class \"fluid-container\"."
],
"tests": [
- "assert($('img').length > 1, 'You should have a total of two images.')",
- "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')",
- "assert(new RegExp('http://bit.ly/fcc-kittens2', 'gi').test($('img.img-responsive').attr('src')), 'Add a second image with the src
of http://bit.ly/fcc-kittens2
.')"
+ "assert($('div').hasClass('container-fluid'), 'Your div
element should have the class \"row\"')",
+ "assert(editor.match(/<\\/div>/g) && editor.match(/
src
attribute of \"http://bit.ly/fcc-kittens2\".",
+ "It would be great if this image could be exactly the width of our phone's screen.",
+ "Fortunately, with Bootstrap, all we need to do is add the \"img-responsive\" class to your image. Do this, and the image should perfectly fit the width of your page."
+ ],
+ "tests": [
+ "assert($('img').length > 1, 'You should have a total of two images.')",
+ "assert($('img').hasClass('img-responsive'), 'Your new image should have the class \"img-responsive\".')",
+ "assert(new RegExp('http://bit.ly/fcc-kittens2', 'gi').test($('img.img-responsive').attr('src')), 'Add a second image with the src
of http://bit.ly/fcc-kittens2
.')"
+ ],
+ "challengeSeed": [
+ "",
+ "",
+ "",
+ "Click here for cat photos.
", + "", + "Things cats love:
", + "Top 3 things cats hate:
", + "Click here for cat photos.
", + "Click here for cat photos.
", "", - "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Click here for cat photos.
", + "Click here for cat photos.
", "", - "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Click here for cat photos.
", + "Click here for cat photos.
", "", - "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Click here for cat photos.
", + "Click here for cat photos.
", "", - "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Click here for cat photos.
", + "Click here for cat photos.
", "", - "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Click here for cat photos.
", + "Click here for cat photos.
", "", - "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Click here for cat photos.
", + "Click here for cat photos.
", "", - "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Click here for cat photos.
", + "Click here for cat photos.
", "", - "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Things cats love:
", - "Top 3 things cats hate:
", - "Things cats love:
", + "Top 3 things cats hate:
", + "Things cats love:
", - "Top 3 things cats hate:
", - "