freeCodeCamp Challenge Guide: Responsively Style Radio Buttons

Guide
1

Responsively Style Radio Buttons

Solutions

Solution 1 (Click to Show/Hide) 
<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>
    <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>
9 Likes
2

Hi there! I seem to be stuck for this challenge… I’ve done everything right and yet it still says that one of my div element is missing a closing tag. Even when I reset my code and copy/paste the code from the Camperbot post above.
Could anybody help me figure out what the problem is?

Thanks so much!!
Ines
(Hope I’m being clear, this is my first post on FCC!)

3

Can you post the code you used, please?

5

Here it is:

<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 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>
    </div>
    <input type="text" placeholder="cat photo URL" required>
    <button type="submit">Submit</button>
  </form>

Thanks in advance!

1 Like
6

Try putting "div class=“col-xs-6” (with the < , >)on the row before each radio button then after each button press enter again and close each of them with /div

I tried that and worked for me,

You can delete the bootstrap’s classes from the checkbox buttons (not needed)

7

hi! I have a pb too. here’s my code:

Indoor
Outdoor
Loving
Lazy
Crazy
Submit

I can’t see what’s wrong with it… :frowning:
Thanks for your help!

8

oops… I can’t see my lines… I try again:

Indoor
Outdoor
Loving
Lazy
Crazy
Submit
9

3 Likes
10

Like i said in my previous post, try separating the rows from div class and the label

like this
< div class=“col-xs-6” >
< label >< input type=“radio” name=“indoor-outdoor” > Indoor < /label >
< /div >
with the with the <,> next to the codes sorry, idk why but when i type them close the post goes blank

11

Thank you! Am I getting it right? Cause it’s not working…

I must be blind! :slight_smile:

1 Like
12

I’ve found. i had to close with a after line 70 . not sure why but it worked…

Thanks a lot!

1 Like
13

You’re welcome.

It’s my first day, but i really appreciate the fact that i managed to help you. :grinning:

1 Like
14

Still not working for me :confused:
@Patrick-French, what do you mean “close with a after line 70” ?
Thanks!!

15

Never mind, I got it yay !!! I had to have 2 div closing tags at the end!

1 Like
16

Hi! Sorry I wasn’t home all day long… I meant that I’ve put a code on my last line. but I typed too fast (i was so happy!), I was not clear. I’m happy you got it anyway! :slight_smile:

17

Really? Cool! happy for you! and for me too :slight_smile:

18

With this one make sure your div is within the label element and not outside of it.

< label>< div class=“col-xs-6”>< input type=“radio” name=“indoor-outdoor”> Indoor< /div>< /label>

Edit: That’s just what passed for me. The next challenge shows something a little different so I dunno.

1 Like
19

Hey guys!

Try using the <div class="col-xs-6"> only for the input type= “radio” buttons

You only have to make changes to the “radio” buttons!

Hope this helps!

2 Likes
20

Hi there I am unable to complete this challenge. This is my code as per the hint. Can you please help me?

Indoor
Outdoor
Loving
Lazy
Crazy
Submit
21
Indoor
Outdoor
Loving
Lazy
Crazy
Submit