Bootstrap Tri-State Option Group

by Erik Bartlow

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://gitcdn.github.io/bootstrap-toggle/2.2.0/css/bootstrap-toggle.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="https://gitcdn.github.io/bootstrap-toggle/2.2.0/js/bootstrap-toggle.min.js"></script>

<div class="container">
<input type="checkbox" class="tri-switch" />
    <div class="btn-group" role="group" aria-label="Basic example">
        <button type="button" class="btn btn-secondary">Yes</button>
        <button type="button" class="btn btn-secondary">N/A</button>
        <button type="button" class="btn btn-secondary">No</button>
    </div>
</div>

CSS

.container{
	margin: 50px;
}

JavaScript

$('.tri-switch').bootstrapTriSwith({
	"onstate-label":"Yes",
	"offstate-label":"No",
	"midstate-label":"N/A",
	"onstate-cssClass":"bg-default",
	"offstate-cssClass":"bg-success",
	"midstate-cssClass":"bg-primary"
});