Born, growing up.

Bootstrap buttons: bits beyond the docs

1. A checkbox-driven single toggle button

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

  class="btn btn-primary"
  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
  <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>&#32;
    <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:

Copyright © 2022 — William Ghelfi — Made with and Gatsby


The postings on this site are my own and don't necessarily represent my employer's positions, strategies or opinions.