Horizontal Radio Buttom Custom Design - html

Question

I been trying to reach this design radio button design with no success
I'm using bootstrap for my site, but all I can reach is this:
This is my code:
.content {background-color: #42d5b9; padding: 50px}
.amount-landing {text-align: center;}
.amount-landing label {color: #FFFFFF;}
.amount-landing > .col-xs-2 {background: url(https://i.imgur.com/K8Nz8Y2.png) repeat-x; background-position: 0 12px;}
.amount-landing input[type="radio"] {
display:none;
}
.amount-landing input[type="radio"] + label span {
display:inline-block;
width:15px;
height:15px;
margin:0px 0px 0 0;
vertical-align:middle;
background: #FFFFFF;
cursor:pointer;
border-radius: 50%;
}
.amount-landing input[type="radio"]:checked + label span {
background: #101B27;
}
<div class="content ">
<div class="form-group">
<div class="row amount-landing gray-line">
<div class="col-xs-2 col-xs-offset-1"><input type="radio"><label for="amount1"><span></span></label></div>
<div class="col-xs-2"><input type="radio"><label for="amount2"><span></span></label></div>
<div class="col-xs-2"><input type="radio"><label for="amount3"><span></span></label></div>
<div class="col-xs-2"><input type="radio"><label for="amount4"><span></span></label></div>
<div class="col-xs-2"><input type="radio"><label for="amount5"><span></span></label></div>
</div>
<!-- This shows radio buttons -->
<div class="row text-center" style="font-size: 14px;color: #FFFFFF;line-height: 14px;">
<div class="col-xs-1"></div>
<div class="col-xs-2">0$</div>
<div class="col-xs-2">1$<br>-<br>1000$</div>
<div class="col-xs-2">1001$<br>-<br>2001$</div>
<div class="col-xs-2">2001$<br>-<br>3000$</div>
<div class="col-xs-2">More than<br>3000$</div>
<div class="col-xs-1"></div>
</div>
<!-- This shows numbers -->
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
So, the code is basically some cols with the radio buttons and labels for making a custom radio button, then I applied a gray line (is an img) to all cols in the first row for making possible showing the background line but this method covers all the column background; then in another row put the amount labels, this also have responsive issues when you shrink the screen the amount labels gets too close each other.
Help would appreciated to light my path, thank you.

Answer 1

Use id and name attributes for your input type="radio". Radio buttons with the same name can only be used as one "group." No need to use 'span' inside 'labels'.
White background line is styled using CSS pseudo element ":after". No need to use background images. In order to avoid the background line expanding beyond the last radio button, made "content" property to none for the last div. This is achieved using CSS pseudoclass ":last-of-type".
.content {background-color: #42d5b9; padding: 50px;}
.amount-landing {text-align: center;}
.amount-landing label {color: #FFFFFF;}
.amount-landing .amount-col {
position: relative;}
.amount-landing .amount-col:after {
content: "";
position:absolute;
width: 100%;
height: 2px;
background-color: #fff;
top: 50%;
}
.amount-landing .amount-col:last-of-type:after {
content: none;
}
.amount-landing input[type="radio"] {
display:none;
}
.amount-landing input[type="radio"] + label {
display:inline-block;
width: 20px;
height:20px;
margin:0px 0px 0 0;
vertical-align:middle;
background: #FFFFFF;
cursor:pointer;
border-radius: 50%;
}
.amount-landing input[type="radio"]:checked + label {
background: #101B27;
}
<div class="content ">
<div class="form-group">
<div class="row amount-landing gray-line">
<div class="col-xs-2 col-xs-offset-1 amount-col"><input type="radio" id="amount1" name="amount"><label for="amount1"></label></div>
<div class="col-xs-2 amount-col"><input type="radio" id="amount2" name="amount"><label for="amount2"></label></div>
<div class="col-xs-2 amount-col"><input type="radio" id="amount3" name="amount"><label for="amount3"></label></div>
<div class="col-xs-2 amount-col"><input type="radio" id="amount4" name="amount"><label for="amount4"></label></div>
<div class="col-xs-2 amount-col"><input type="radio" id="amount5" name="amount"><label for="amount5"></label></div>
</div>
<!-- This shows radio buttons -->
<div class="row text-center" style="font-size: 13px;color: #FFFFFF;line-height: 15px;">
<div class="col-xs-1"></div>
<div class="col-xs-2">0$</div>
<div class="col-xs-2">1$-1000$</div>
<div class="col-xs-2">1001$-2001$</div>
<div class="col-xs-2">2001$-3000$</div>
<div class="col-xs-2">More than 3000$</div>
<div class="col-xs-1"></div>
</div>
<!-- This shows numbers -->
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">