Responsively Style Checkboxes #4

I can’t see why it is saying I still need to close my divs?

Your code so far

<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">
    <div class="col-xs-8">
      <h2 class="text-primary text-center">CatPhotoApp</h2>
    </div>
    <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>
  <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"><i class="fa fa-thumbs-up"></i> Like</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i> Info</button>
    </div>
    <div class="col-xs-4">
      <button class="btn btn-block btn-danger"><i class="fa fa-trash"></i> 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">
    <div class="row">
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Indoor</label>
      </div>
      <div class="col-xs-6">
        <label><input type="radio" name="indoor-outdoor"> Outdoor</label>
      </div>
    </div>
    <div class="row">
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Loving</label> </div>
        <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Lazy</label> </div>
          <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Crazy</label> </div> 
 <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>
 </div>
  </div>
</div>
</div>
</div>

Your browser information:

Your Browser User Agent is: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/58.0.3029.96 Safari/537.36.

Link to the challenge:

There are unnecessary div closing tags at the bottom of your code and your last <div class="row"> isn’t properly closed.

1 Like

Thanks, I removed the excess div tags but don’t understand the div class row not closed property?

If you are still getting errors, make sure to post your new code. When you enter a code block into the forum, remember to precede it with a line of three backticks and follow it with a line of three backticks to make easier to read. See this post to find the backtick on your keyboard. The “preformatted text” tool in the editor (</>) will also add backticks around text.

markdown_Forums

This <div class="row"> also needs a closing tag :

    <div class="row">
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Loving</label> 
      </div>
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Lazy</label> 
      </div>
      <div class="col-xs-4">
    <label><input type="checkbox" name="personality"> Crazy</label> 
      </div> 
    </div> //<-- This one isn't present in your code