Born, growing up.

Bootstrap buttons: bits beyond the docs

8 years ago

1. A checkbox-driven single toggle button

The official docs show us a stateful, single toggle, button:

<button
  type="button"
  class="btn btn-primary"
  data-toggle="button"
  aria-pressed="false"
  autocomplete="off"
>
  Single toggle
</button>

After that, it's the turn of a checkbox group:

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary active">
    <input type="checkbox" autocomplete="off" checked /> Checkbox 1
    (pre-checked)
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" /> Checkbox 2
  </label>
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off" /> Checkbox 3
  </label>
</div>

Cool. Let's see what my friend S.C. Clarence has to say about it:

Single toggle checkbox!

Yep, thanks Clarence.
Anyway. Let's just build a simple checkbox:

<div class="checkbox">
  <label>
    <input type="checkbox" value="" />
    I have a thirst...
  </label>
</div>

Then adding data-toggle="buttons" and making a button of it:

<div class="checkbox" data-toggle="buttons">
  <label class="btn btn-danger">
    <span class="glyphicon glyphicon-fire"></span>&#32;
    <input type="checkbox" value="" />
    Orange Mocha Frappuccino!
  </label>
</div>

We now have a cool – if somewhat dangerous – toggleable single checkbox.

2. On / Off switch

Finally, I'd like to introduce Bootstrap Switch by Mattia Larentis and Peter Stein.
Now maintained by Emanuele Marchi.

I always liked switches, both in the real world and in computer / smartphone interfaces!

Go take a look at the demo:
http://www.bootstrap-switch.org/

Or read the docs, if you want to use it in your projects:
http://www.bootstrap-switch.org/options.html

That's it. Hope you liked these pills :)

P.S.: As you may know, I wrote a book about Bootstrap 3 to help newcomers and starters in getting productive as fast as they can without losing time going deep or getting stuck in the official docs.

I think it's worth checking it out:
https://www.williamghelfi.com/bootstrap-in-practice