Twitter Bootstrap Button Group Control Radio Buttons/Checkboxes

Question

Bootstrap 3 has a “native” solution…

There now is a “true” Bootstrap solution for this problem, which appears to work fine also on older browsers. Here’s what it looks like:

// get selection
$('.colors input[type=radio]').on('change', function() {
    console.log(this.value);
});

<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<div class="btn-group colors" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="radio" name="options" value="red" autocomplete="off" checked> Red
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="orange" autocomplete="off"> Orange
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" value="yellow" autocomplete="off"> Yellow
  </label>
</div>

<!-- jQuery and Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

See the relevant Bootstrap documentation for more information.

Bootstrap 4

Bootstrap 4 supports component the same way as Bootstrap 3, but Bootstrap 4 does not support IE9. You might want to check out the Bootstrap IE8 project.

Leave a Comment Cancel reply