Use the Bootstrap Grid to Put Elements Side By Side 5

Tell us what’s happening:
What am I doing wrong in this code? I’m so confused about what I’m doing wrong. I did exactly as the directions said, but, I’m not getting the correct answer. I keep getting an error that says this:

// 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:
https://learn.freecodecamp.org/front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side/

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.

This one is not in a div

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

If you have changed something please post again your code

Anyway one of these is missing the closing tag:

This is my code now:

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 col-xs-8”></div><h2 class=“text-primary text-center”>CatPhotoApp</h2>

<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 class=“col-xs-4”><img src=“https://bit.ly/fcc-running-cats” class=“img-responsive” alt=“Three kittens running towards the camera.”></div>

<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>