Style bootstrap checkboxes as buttons without btn-group

14,600
@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

Share:
14,600
Luciasar
Author by

Luciasar

Co-op web programmer and data analytics designer at Construction Robotics.

Updated on June 06, 2022

Comments

  • Luciasar
    Luciasar almost 2 years

    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?