Intro

The only difference between default Bootstrap is the additional span. After that it's only a question of adding a class that fits your needs.

Bootstrap 3

The Bootstrap 3 default way of generating checkbox looks a like this: 

<div class="checkbox">
	<label>
		<input type="checkbox">default Bootstrap 3
	</label>
</div>

Ti-Ta-Toggle awesomenes

Just by adding one <span> plus the class .checkbox-slider--TYPE you get this result: 

<div class="checkbox checkbox-slider--default">
	<label>
		<input type="checkbox"><span>TiTaToggle</span>
	</label>
</div>

Note:

Don't forget to add the span after the input

Slider default checkbox-slider--default

Out of the box this would be the modest version, without any bells and whistles.

Default
Small
Medium
Large
<div class="... checkbox-slider--default">
	...
</div>

Slider Default rounded checkbox-slider--a-rounded

It takes the edge off.

Default
Small
Medium
Large
<div class="... checkbox-slider--a-rounded">
	...
</div>

Slider A checkbox-slider--a

Sometimes you need some text to double the meaning / state of the checkbox. I've noticed many people have trouble with a checkbox, when it's "On" of "Off". To make this more clear, you can use this version.

Default
Small
Medium
Large
<div class="... checkbox-slider--a">
	...
</div>

Slider B checkbox-slider--b

An iOS like version of just a plain checkbox.

Default
Small
Medium
Large
<div class="... checkbox-slider--b">
	...
</div>

Slider B Flat checkbox-slider--b-flat

Just flat, it seems to be very fashionable. We just wait until the bevel is back.

Default
Small
Medium
Large
<div class="... checkbox-slider--b-flat">
	...
</div>

Slider C checkbox-slider--c

Inspired by the Google material toggle boxes. And again this is just plain Bootstrap 3.

Default
Small
Medium
Large
<div class="... checkbox-slider--c">
	...
</div>

Slider C Weight checkbox-slider--c-weight

Giving the slider some more weight.

Default
Small
Medium
Large
<div class="... checkbox-slider--c-weight">
	...
</div>

Sizes

Propper sizing option should get the pony over the hill for your next project.

Next to the default size there are 3 sizes:

Just like Bootstrap. In the case you need something special, use the _titatoggle.less to alther your preferend settings and sizes.

Default
Small
Medium
Large
<div class="... checkbox-slider-sm ...">
	...
</div>

<div class="... <DEFAULT> ...">
	...
</div>

<div class="... checkbox-slider-md ...">
	...
</div>

<div class="... checkbox-slider-lg ...">
	...
</div>

Indicator

Small visual que for the label to show that the checkbox is checked.

Not so usable for the visually impaired, due to the fact it's only a color and contrast is to low. 
<div class="checkbox ...">
...
	<span class="indicator-success">danger</span>
...
</div>

<div class="checkbox ...">
...
	<span class="indicator-info">danger</span>
...
</div>

<div class="checkbox ...">
...
	<span class="indicator-warning">danger</span>
...
</div>

<div class="checkbox ...">
...
	<span class="indicator-danger">danger</span>
...
</div>

Variations

Checkboxes can have different colors, just like buttons.

We use the default Bootstrap variables @brand-XXX to color the checkbox.

Not so usable for the visually impaired, due to the fact it's only a color and contrast is to low. And keep in mind that colorblindness is a real fact.
Default
Info
Danger
Warning
<div class="checkbox ... checkbox-slider-info">
<div class="checkbox ... checkbox-slider-danger">
<div class="checkbox ... checkbox-slider-warning">

Howto

Okay and now what?

You have a few options to include this into your project.

Bower

$ bower install titatoggle

Less

Inside the project you will find _titatoggle.less Include this file into your own project, and stuff just works. If needed, you can fiddle around with some less variables.

CSS

There is alway the option to include only the titatoggle-dist.css. Keep in mind this thing is build on top off Bootstrap 3. 

<link href="css/titatoggle-dist.css" rel="stylesheet">