Tell us what’s happening:
// running tests
Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4.
// tests completed
Your code so far
<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.">
<div class="row">
<button class="btn btn-block btn-primary col-xs-4">Like</button>
</div>
<div>
<button class="btn btn-block btn-info col-xs-4">Info</button>
</div>
<div>
<button class="btn btn-block btn-danger col-xs-4">Delete</button>
</div>
<div>
<button class="col-xs-4"></button>
</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>
Your browser information:
User Agent is: Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.121 Safari/537.36 Avast/72.0.1174.122.
Link to the challenge:
Learn to Code — For Free
ILM
April 7, 2019, 3:01pm
2
The class col-xs-4 is for the div element, not the button element
<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.”>
<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>
<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>
Now what am I doing wrong? I was pretty sure I had it, but now it isn’t working.
I’m still getting an error whenever I try typing in the divs. Not sure why, but I am. I think I’m doing it wrong, and it seems a bit confusing, especially for someone who is still new to learning coding.
Look at the test message
“Make sure each of your div elements has a closing tag.”
You are missing the closing div tag on the div with the class of row.
I put the closing div tag on all of them, but I still got an error that says:
// running tests
Your buttons should all be nested within the same div element with the class row.
Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4.
// tests completed
ILM
April 7, 2019, 9:41pm
8
If you have changed something please post again your code
Anyway one of these is missing the closing tag:
LBDemaree:
<div class=“row”>