Use the Bootstrap Grid to Put Elements Side By Side 2018

Tell us what’s happening:
I keep getting this error message “Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4.” It appears to me that is the case. I have also looked back at other examples from this help forum. They seem to be the same as what I’m doing? Am I missing a space or other character somewhere?

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="row">
  <div class="col-sx-4"><button class="btn btn-block btn-primary">Like</button></div>
<div class="col-sx-4"><button class="btn btn-block btn-primary">Info</button></div>
<div class="col-sx-4"><button class="btn btn-block btn-primary">Delete</button></div>
</div>
<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>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/63.0.3239.132 Safari/537.36.

Link to the challenge:
https://www.freecodecamp.org/challenges/use-the-bootstrap-grid-to-put-elements-side-by-side

You’re not going to create new buttons. Rather, you’ll wrap the existing buttons below the cat picture in the proper <div>s.

I am really trying to understand what you are trying to tell me. I followed the directions in the challenge. I am not quite understanding how to wrap the existing buttons around the cat picture. The directions do not put it in those terms.

When you begin the challenge, there are already these three buttons (below the cat picture).

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

And then the directions are

Put the Like, Info and Delete buttons side-by-side by nesting all three of them within one <div class="row"> element, then each of them within a <div class="col-xs-4"> element.

Your code almost did it, but you’re going to put the <div class="row"> and the <div class="col-xs-4"> around these buttons.

1 Like

I now see the silly mistake I was making:stuck_out_tongue_winking_eye:. Sorry about that. I was creating a whole new set of buttons instead of creating a div class around the existing buttons. I will try it now and let you know how it goes.