3

I'm using Bootstrap 3 and I want to make two buttons work as Radio Buttons, but I can't figure out how. Here goes my code

<div class="btn-group" >
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            PERSONAL
        </button>
    </div>
    <div class="btn-group">
        <button type="button" class="btn btn-default">
            COMPANY
        </button>
    </div>
</div>

When I select PERSONAL, the other one is deselected (as it should), but the problem is:

  • None of them are active when the form is started
  • I can deselect both clicking out of the form
ekad
  • 14,436
  • 26
  • 44
  • 46
Felipe Carminati
  • 297
  • 1
  • 5
  • 16

2 Answers2

3
<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option1"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option2"> Option 2
  </label>
  <label class="btn btn-primary">
    <input type="radio" name="options" id="option3"> Option 3
  </label>
</div>

And initialize with js after: Enable buttons via JavaScript:

$('.btn').button()

You can make one of it active adding "active" class to label - "btn btn-primary active" and "checked" to input radio.

Evgeniy Kiselyov
  • 123
  • 6
0

I think that there is a better solution nowadays, according to the Bootstrap docs:

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" />
<div class="btn-group" role="group" aria-label="Basic radio toggle button group">
  <input type="radio" class="btn-check" name="btnradio" id="btnradio1" autocomplete="off" checked>
  <label class="btn btn-outline-primary" for="btnradio1">Radio 1</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio2" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio2">Radio 2</label>

  <input type="radio" class="btn-check" name="btnradio" id="btnradio3" autocomplete="off">
  <label class="btn btn-outline-primary" for="btnradio3">Radio 3</label>
</div>
pbur
  • 85
  • 7