6

I'm having a problem with a set of radio buttons.

<div class="btn-group control-buttons" data-toggle="buttons-radio">
    <button type="button" class="btn">One</button>
    <button type="button" class="btn">Two</button>
    <button type="button" class="btn">Three</button>
</div>

See here: http://jsfiddle.net/dhbenson/LM9uW/

When the buttons are clicked, they don't ever stay depressed (i.e. none ever appear to be "active").

Does anyone know why not? What else do I need to do to make these buttons work properly?

EDIT

Ah, I see. I forgot to include the bootstrap js code.

This fiddle works: http://jsfiddle.net/dhbenson/qNeSS/

KyleMit
  • 35,223
  • 60
  • 418
  • 600
dB'
  • 7,246
  • 13
  • 57
  • 97

2 Answers2

3

You need the bootstrap javascript for that functionality.

Add this to your HTML head:

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
Amir T
  • 2,629
  • 17
  • 20
  • This did nothing for me. Still no active state. – BradLaney Mar 17 '14 at 01:16
  • Looks like the resource isn't available there anymore, it redirects to getboostrap.com which details how to get it: http://getbootstrap.com/getting-started/#download – Amir T Mar 17 '14 at 11:03
  • I have the right bootstrap.min.js. It still does nothing. http://codepen.io/anon/pen/uCbnr/ – BradLaney Apr 01 '14 at 04:56
1

Try this code:

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

and add one file i.e. bootstrap-button.js

KyleMit
  • 35,223
  • 60
  • 418
  • 600
Rupesh Nerkar
  • 391
  • 1
  • 3
  • 22