Bootstrap buttons: bits beyond the docs

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

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 class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 2
  <label class="btn btn-primary">
    <input type="checkbox" autocomplete="off"> Checkbox 3

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

Ionic + Angular

Single toggle checkbox!

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

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

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> 
    <input type="checkbox" value="" />
    Orange Mocha Frappuccino!

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:

Or read the docs, if you want to use it in your projects:

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:

Want to learn more about Bootstrap?
Take a look at these other posts.