Pre-toggle a button in Bootstrap's btn-group?

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

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:

1. The data-toggle="buttons" in the btn-group div.
2. The active class on the label 5.
3. The checked on the <input type="radio"> for 5.

I hope this helps others.