Challenge Responsively Style Radio Buttons

Challenge Responsively Style Radio Buttons

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>