Bootstrap - Responsively Style Radio Buttons

HTML-CSS
1

Tell us what’s happening:

Describe your issue in detail here.

I believe I have done all the steps, but it’s still not registering when I run the test.

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://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-6">
      <button class="btn btn-block btn-primary"><i class="fa fa-thumbs-up"></i>Like</button>
    </div>
    <div class="col-xs-6">
      <button class="btn btn-block btn-info"><i class="fa fa-info-circle"></i>Info</button>
    </div>
    <div class="col-xs-6">
      <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">
    <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 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/119.0.0.0 Safari/537.36

Challenge Information:

Bootstrap - Responsively Style Radio Buttons

2

Nest both your radio buttons within a <div class="row"> element. Then nest each of them within a <div class="col-xs-6"> element.

Note: As a reminder, radio buttons are input elements of type radio.

3

input type radio , not button . Hope this helps…

4

So like this? If so, this didn’t work either unfortunately. It had me use button in the previous exercise and didn’t ever tell me to change it to radio and it also mentions all of my radio buttons being nested inside one div with the class row.

Screenshot 2023-11-06 at 4.46.25 PM
Screenshot 2023-11-06 at 4.46.25 PM1180×980 122 KB

5

Look at the Note the directions give you

Note: As a reminder, radio buttons are input elements of type radio

There is no such thing as <radio>

1 Like
6

reset the step and find the inputs

input elements of type radio .

you have a two of them in the form . Hope this helps …

7

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