Space out and replace radio buttons with images in boostrap

Asked May 09 '16 at 16:43

Active May 09 '16 at 17:04

Viewed 40 times

I want to do two different things with a set of radio buttons.

<div id="timeSpanForm">
    <input type="radio" id="timeSpan" name="timeSpan" value="0">0-2år
    <input type="radio" id="timeSpan" name="timeSpan" value="2">2-10 år
    <input type="radio" id="timeSpan" name="timeSpan" value="10">10+ år                    
</div>

I want to replace the radio button circle with an image that displays another image when checked.
I want to space out the radio buttons evenly.

So my question is how to do this in general but then also specifically if there is a special boostrap way to do it, since i have to work in bootstrap without too much experience. I have tried googling but not found anything specific. Maybe i just dont get the right search terms.

Im using bootstrap.

edited May 09 '16 at 17:04

technophobia

2,644
1
20
29

asked May 09 '16 at 16:43

Daarwin

2,896
7
39
69

Not sure about question #1 but for justifying, take a look at Bootstrap docs here: http://getbootstrap.com/components/#nav-justified (you can destyle the navs so they just look like text) – Rachel S May 09 '16 at 16:50
@RachelS. Thanks for your time! But im not really sure how this would help. – Daarwin May 09 '16 at 16:56
@Lautaro this would justify your radio inputs and keep them evenly spaced apart. – Rachel S May 09 '16 at 17:03
@RachelS Thanks! That did it. I couldnt rap my head on how to use it since its not nav items. But i got it. Cheers! – Daarwin May 09 '16 at 17:18
@RachelS Make it into an answer so i can tag it as correct. – Daarwin May 09 '16 at 17:29
I can't anymore but you can vote my comment up ;) – Rachel S May 10 '16 at 15:34

Space out and replace radio buttons with images in boostrap

0 Answers0