Bootstrap 4 - Button Group - Default Select the first button [duplicate] - html

Question

I would like to set a selected button in Bootstrap's btn-group:
<div class="btn-toolbar">
<div class="btn-group">
<button type="button" class="btn btn-default">5</button>
<button type="button" class="btn btn-default">6</button>
<button type="button" class="btn btn-default">7</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-default">8</button>
</div>
</div>
How can I pre-select option 5? This answer suggests that I can add active class to the button, which does indeed work initially, but then clicking on the other buttons doesn't deactivate that button, as I would expect.
Here is a fiddle: http://bootply.com/90490
Here is another fiddle with the active class applied, showing why it isn't the correct solution: http://bootply.com/90491 - click on any of the other buttons, and button 5 still remains active.

Answer 1

Assuming that you want there to be a single selection per button group and that you have included the bootstrap JavaScript file, then the following should work.
Markup
<div class="btn-toolbar">
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option5">5</label>
<label class="btn btn-default"><input type="radio" name="options" id="option6">6</label>
<label class="btn btn-default"><input type="radio" name="options" id="option7">7</label>
</div>
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default"><input type="radio" name="options" id="option8">8</label>
</div>
</div>
JavaScript
$(document).ready(function() {
$(".btn").first().button("toggle");
});
If you want to, for example, pre-toggle the third button, you can use the slice function like so:
$(".btn").slice(2,3).button("toggle");
Alternatively you could assign identifiers to the buttons.
Here's my fiddle: http://bootply.com/90501

Answer 2

I was looking for an answer to the pre-toggle a button and found this SO. They all seemed a bit difficult and I found a link to BootStrap 4 checkbox buttons which gave me some hints on how BootStrap 3 works. My solution is, I think, simpler as it can be pre-written in the html. The solution is below:
<div class="btn-group" data-toggle="buttons">
<label class="btn btn-default active">
<input type="radio" checked>5
</label>
<label class="btn btn-default">
<input type="radio">6
</label>
<label class="btn btn-default">
<input type="radio">7
</label>
</div>
As I say, this was prompted by BootStrap 4 docs but works on BootStrap 3. The important parts are:
The data-toggle="buttons" in the btn-group div.
The active class on the label 5.
The checked on the <input type="radio"> for 5.
I hope this helps others.

Answer 3

You can remove checked from input tag of first button,and add active class on condition .
eg:
<div class="btn-group btn-group-toggle" data-toggle="buttons">
<label class="btn btn-secondary" [ngClass]="{'active': splitOption=='equal'}" >
<input type="radio" name="options" id="option1" autocomplete="off" > =
</label>
</div>