Bootstrap - Responsively Style Radio Buttons

my forms dont work scorrect

<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://cdn.freecodecamp.org/curriculum/cat-photo-app/relaxing-cat.jpg" alt="A cute orange cat lying on its back."></a>
    </div>
  </div>
  <img src="https://cdn.freecodecamp.org/curriculum/cat-photo-app/running-cats.jpg" 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="https://freecatphotoapp.com/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 class="col-xs-6">
    <label><input type="checkbox" name="personality"> Loving</label>
    </div>
      <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Lazy</label>
    </div>
      <div class="col-xs-6">
    <label><input type="checkbox" name="personality"> Crazy</label>
      </div>
      
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
    </div>111
  </form>
  
</div>

Your browser information:

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

Challenge: Bootstrap - Responsively Style Radio Buttons

Link to the challenge:

You have a few errors in here.

You also haven’t quite followed the instructions correctly.
I would reset the lesson to fix any errors and then try again.

  1. You should only add <div class="col-xs-6"> to your radio buttons, not to your checkboxes or anything else too.

  2. Your <div class="row"> should only enclose those two radio buttons but you appear to have put the closing tag for this at the very end of your code.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.