javascript - How to display radio buttons as Bootstrap buttons that change color in Rails? -

i creating simple survey app in rails displays question , answers select among (only 1 may selected). to:

• display radio buttons bootstrap buttons
• display buttons vertically vertical spacing (not bootstrap .btn-group no spacing)
• highlight when button has been selected

i able display radios bootstrap buttons , vertically:

bootstrap offers data-toggle="button" toggle button state. however, when add "data-toggle: button" radio input tag, nothing happens. when add radio button's label tag, css selector on .btn.active change color, button changes color no longer selected:

how can make color highlighting , radio button work correctly? thanks!

_form.html.erb excerpt:

  <% @question.answers.each |a| %>     <div class='answer-body form-group' data-toggle: "buttons">         <%= f.radio_button :answer_id, a.id %>         <%= f.label :answer_id, a.body, { value: a.id, class: 'btn btn-primary', "data-toggle": "button" } %>     </div>   <% end %> 

scss

.btn.active {   background-color: #5cb85c; } 

generated html

<div class='answer-body form-group' data-toggle: "buttons">     <input type="radio" value="5" name="user_response[answer_id]" id="user_response_answer_id_5" />     <label class="btn btn-primary" data-toggle="button" for="user_response_answer_id_5">arf! love them.</label> </div>  <div class='answer-body form-group' data-toggle: "buttons">     <input type="radio" value="6" name="user_response[answer_id]" id="user_response_answer_id_6" />     <label class="btn btn-primary" data-toggle="button" for="user_response_answer_id_6">they&#39;re okay</label> </div>  <div class='answer-body form-group' data-toggle: "buttons">     <input type="radio" value="7" name="user_response[answer_id]" id="user_response_answer_id_7" />     <label class="btn btn-primary" data-toggle="button" for="user_response_answer_id_7">bah humbug</label> </div> 

i'm going attempt answer question think want.

first, think need use javascript button group bootstrap in order behavior want. can change them vertical, have manually add overriding style put spaces between them.

do want radios still showing or not? if not, code might suffice (minus css change color of active state , increase spacing between buttons)

rails html.erb

  <div class="field form-group">     <%= f.label :answer_id %><br>     <div class="btn-group-vertical" data-toggle="buttons">       <%= f.label :answer_id, class: "btn btn-primary active" %>         <%= f.radio_button :answer_id, 5, checked: true %>         arf! love them.       <% end %>       <%= f.label :answer_id, class: "btn btn-primary" %>         <%= f.radio_button :answer_id, 6 %>         they're okay.       <% end %>       <%= f.label :answer_id, class: "btn btn-primary" %>         <%= f.radio_button :answer_id, 7 %>         bah humbug.       <% end %>     </div>   </div> 

compiled html

  <div class="field form-group">     <label for="user_response_answer_id">answer</label><br>     <div class="btn-group-vertical" data-toggle="buttons">       <label class="btn btn-primary active" for="user_response_answer_id">         <input type="radio" value="5" checked="checked" name="user_response[answer_id]" id="user_response_answer_id_5" />         arf! love them. </label>      <label class="btn btn-primary" for="user_response_answer_id">         <input type="radio" value="6" name="user_response[answer_id]" id="user_response_answer_id_6" />         they're okay. </label>      <label class="btn btn-primary" for="user_response_answer_id">         <input type="radio" value="7" name="user_response[answer_id]" id="user_response_answer_id_7" />         bah humbug. </label>    </div>   </div> 

i don't have enough reputation points post screenshot! if answer, think have enough , can edit include screenshot.

i apologize if there typos - using existing app table locations , field distance, if see "location" or "distance" anywhere, substitute "user_response" , "answer_id"