Toggles

Using checkbox as switch / toggle with styling

Switch

Wrap a label / checkbox input pattern into form-group with .toggle class.

{% highlight html %} {% endhighlight %}

Default color is brand primary. Success color is also supported, use .success class on input tag

{% highlight html %} {% endhighlight %}

Finally use .rounded class on .checkbox-label element to get rounded switch alternate version. Make sure to set the width according to the lenghtiest toggle state label.

{% highlight html %} {% endhighlight %}

3 way toggle

Wrap 3 radio type inputs into a .btn-group element.

{% highlight html %} {% endhighlight %}

Alternatively, use .no-outline class on .btn-group element to get the clear version.

{% highlight html %} {% endhighlight %}