Bootstrap button group preset button with html only

Question

Using Bootstrap I want a group of buttons, but with one button selected in advance. If I use the html below, then the first button will be preselected, but it will remain active even when I click one of the other buttons.

Using only html, how can I define a group of buttons with one button selected when this button deselects when one of the other buttons is pressed.

<div class="btn-group">
  <button type="button" class="btn btn-default active">Left</button>
  <button type="button" class="btn btn-default">Middle</button>
  <button type="button" class="btn btn-default">Right</button>
</div>

Answer 1

It is not possible to do this only with HTML - (as the name suggests).

, , JavaScript, - autofocus="autofocus" :

<button type="button" class="btn btn-default" autofocus="autofocus">Left</button>

, . , .

, .btn-default.active .btn-default:focus:

.btn-default:focus, .btn-default.active {
    color: #333;
    background-color: #ebebeb;
    border-color: #adadad;
}

, . , JavaScript. , active , . , .

, Bootstrap JS. , Bootstrap JS/jQuery .

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <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>