Tell us what’s happening:
Hey i’m stuck in this one. Tried to do the things people have told in the hint section and the only objective that isn’t met is
“Nest each of your radio buttons inside its own div with the class col-xs-6.”.
All help is appreciated!
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://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 class="cos-xs-6">
<label><input type="radio" name="indoor-outdoor"/> Indoor</label>
</div>
<div class="cos-xs-6">
<label><input type="radio" name="indoor-outdoor"/> Outdoor</label>
</div>
<label><input type="checkbox" name="personality"/> Loving</label>
<div class="cos-xs-6">
<label><input type="checkbox" name="personality"/> Lazy</label>
</div>
<div class="cos-xs-6">
<label><input type="checkbox" name="personality"/> Crazy</label>
</div>
<div class="cos-xs-6">
<button type="submit">Submit</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">
<input type="text" placeholder="cat photo URL" required>
</form>
</div>
Your browser information:
Your Browser User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.101 Safari/537.36.
Link to the challenge:
https://www.freecodecamp.org/challenges/responsively-style-radio-buttons