Style bootstrap checkboxes as buttons without btn-group

Question

I'm trying to get a list of items from my database, where each listed item is paired with a selectable button for "delete" in the Bootstrap alert style. When the user submits using a "delete selected" button at the bottom of the page, all the entries that were selected will be removed from the database.

Now, Bootstrap's documentation only explains how to style check boxes as buttons in a btn-group div, which groups them all together in one line. I'm working with a list, so I don't want the checkbox buttons in a group: I need them per line, and clearly associated with the label of the entry they're deleting. But I can't seem to get the checkboxes to style as buttons without that btn-group div. It seems pretty arbitrary, and I'm wondering if there's an easy way to do this in bootstrap styling without resorting to hand-writing a bunch of javascript onclick events to use the regular bootstrap button type without checkboxes.

Here's what I have right now, where I just put every checkbox by itself in its own little btn-group, but it formats all weird and autoselects the buttons by default:

@foreach ($data['entries'] as $entry) <!-- blade template stuff -->
            <div class="btn-group" data-toggle="buttons">
                    Label of the database entry
                    <label class="btn btn-danger active">
                        <input type="checkbox" autocomplete="off"> Delete
                    </label>
            </div>
            </br>
            </br>
@endforeach

Is there a good way to do this in Bootstrap, or am I stuck writing it myself in js?

Answer 1

@foreach ($data['entries'] as $entry) <!-- blade template stuff -->
  <div data-toggle="buttons">
    Label of the database entry

    <label class="btn btn-danger">
      <input type="checkbox" autocomplete="off"> Delete
    </label>
  </div>
@endforeach

This should work, as simple as just removing the btn-group class