Twitter Bootstrap Toggle Buttons

by Sebastian Kay

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css">
<script src="https://rawgit.com/prokki/twbs-toggle-buttons/master/dist/jquery.twbs-toggle-buttons.min.js"></script>
<div class="form-group container">

  <!-- radio group / required -->
  <div class="card">
    <div class="card-header">Example <strong>Radio Group</strong> I - Required</div>
    <div class="card-body">
      <label class="control-label">Is it true?</label>
      <div class="btn-group btn-group-toggle form-control" data-toggle="buttons">
        <div class="btn active" role="button">
          <input type="radio" name="options" value="1" required="required">yes
        </div>
        <div class="btn" role="button">
          <input type="radio" name="options" value="0">no
        </div>
      </div>
    </div>
  </div>

  <!-- radio group / not required -->
  <div class="card">
    <div class="card-header">Example <strong>Radio Group</strong> II - Not Required</div>
    <div class="card-body">
      <label class="control-label">Is it true?</label>
      <div class="btn-group btn-group-toggle form-control" style="border:none;" data-toggle="buttons">
        <div class="btn active" role="button">
          <input type="radio" name="options" value="1">yes
        </div>
        <div class="btn" role="button">
          <input type="radio" name="options" value="0">no
        </div>
      </div>
    </div>
  </div>

<div class="btn-group btn-group-toggle form-control" data-toggle="buttons">
        <div class="btn active" role="button">
          <input type="radio" name="options" value="1" required="required">yes
        </div>
        <div class="btn" role="button" data-twbs-toggle-buttons-class-active="btn-warning">
          <input type="radio"...

CSS

.card {
  margin-top: 1em;
}

.form-control {
  border: none;
}

.control-label {
  margin: .5em 1em 0;
}

JavaScript

$(".btn-group-toggle").twbsToggleButtons();