Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to use Bootstrap radio buttons?

I'm using Bootstrap 2.3.2 and I can't seem to get radio buttons to work. I'm using the code from Bootstrap's website:

<div class="btn-group" data-toggle="buttons-radio">
  <button type="button" class="btn btn-primary">Left</button>
  <button type="button" class="btn btn-primary">Middle</button>
  <button type="button" class="btn btn-primary">Right</button>
</div>

What do I need to do from here? With this I get 3 buttons, but clicking them doesn't change them to active and they don't look like they've been clicked.

EDIT:

If I initialize the buttons in JS like so:

$('.btn-group').button();

This markup is generated for the group:

<div class="btn-group ui-button ui-widget ui-state-default ui-corner-all 
            ui-button-text-only" data-toggle="buttons-checkbox" 
            role="button" aria-disabled="false">
   <span class="ui-button-text">
        <button type="button" class="btn btn-primary">Left</button>
        <button type="button" class="btn btn-primary">Middle</button>
        <button type="button" class="btn btn-primary">Right</button>
   </span>
</div>

Compared to this on the bootstrap website:

<div class="btn-group" data-toggle="buttons-radio">
    <button type="button" class="btn btn-primary">Left</button>
    <button type="button" class="btn btn-primary">Middle</button>
    <button type="button" class="btn btn-primary active">Right</button>
</div>

Not sure why it's working different here.

like image 310
sbonkosky Avatar asked Oct 29 '13 13:10

sbonkosky


1 Answers

Looking in Bootstrap 2.3.2 doc (see Usage section), you need to initialize your buttons :

$('.btn-group').button();

Working example based on your code

like image 131
zessx Avatar answered Oct 20 '22 07:10

zessx