freeCodeCamp Challenge Guide: Responsively Style Radio Buttons

freeCodeCamp Challenge Guide: Responsively Style Radio Buttons
0

#1

You can use Bootstrap’s col-xs-* classes on form elements. That will make radio buttons evenly spread out across the page regardless of how wide the screen might be.

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

<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>

#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!


#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


#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:


#12

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

Thanks a lot!


#13

You’re welcome.

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


#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!


#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.


#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!


#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