Bootstrap buttons should be nested within its own div element ( side by side)

Tell us what’s happening:
Hello,
I am supposed to get the three buttons next to each other. This is the task at hand in which 3 out of the 4 are completed.

In the Cat Photo App that we’re building, we’ll use col-xs-* , where xs means extra small (like an extra-small mobile phone screen), and * is the number of columns specifying how many columns wide the element should be.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.The row class is applied to a div , and the buttons themselves can be nested within it.

This is the task that is a not working. What am I missing?
Each of your Bootstrap buttons should be nested within its own div element with the class col-xs-4 .

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>



<div class="row"</div>

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

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36.

Link to the challenge:
https://learn.freecodecamp.org/front-end-libraries/bootstrap/use-the-bootstrap-grid-to-put-elements-side-by-side

  1. Many of your opening div tags are missing >.

  2. Read the directions carefully: “ 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”.

Hi Eoja,
I changed it around but if I do, the instructions do not go through as passed. Especially for section 2.

<div class= "row"</div>

  <div><button class = "col-xs-4""btn btn-block btn-primary">Like</button></div>
  <div><button class = "col-xs-4""btn btn-block btn-info">Info</button></div>
  <div><button class = "col-xs-4""btn btn-block btn-danger">Delete</button></div> 

Your first div tag is still missing > and the other div tags are not nested within it.

Also this is not correct. Look at the directions carefully, specifically:

Is that how your code looks?