<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<h3 class="text-center">Material Design Switch</h3>
<hr>
<div class="col-xs-12">
<p class="lead">I have been using an Android Device for the last few days and am falling in love with the switchs they use in Android. I loved them so much I wanted to port them over to Bootstrap so I could use them in future projects. I did some research and all of the ones I could find used custom colors which prevented them from working with Bootswatch or required you to edit the css files to make them match your theme. I wanted to work around that.</p>
<p class="lead">Please use the theme picker above to see how this snippet works with bootswatch themes. I hope you enjoy this snippet.</p>
</div>
</div>
<div class="container">
<div class="row">
<div class="col-xs-12 col-sm-6 col-md-4 col-sm-offset-3 col-md-offset-4">
<div class="panel panel-default">
<!-- Default panel contents -->
<div class="panel-heading">Filter by Profile</div>
<!-- List group -->
<ul class="list-group">
<li class="list-group-item">
Developer
<div class="material-switch pull-right">
<input id="chkdev" name="chkdev" type="checkbox"/>
<label for="chkdev" class="label-default"></label>
</div>
</li>
<li class="list-group-item">
UI Developer
<div class="material-switch pull-right">
<input id="chkuidev" name="chkuidev" type="checkbox"/>
<label for="chkuidev" class="label-primary"></label>
</div>
</li>
<li class="list-group-item">
QA/Testing
<div class="material-switch pull-right">
<input id="chkqa" name="chkqa" type="checkbox"/>
<label for="chkqa" class="label-success"></label>
</div>
</li>
<li class="list-group-item">
DBA
<div class="material-switch pull-right">
<input id="chkdba" name="chkdba" type="checkbox"/>
<label for="chkdba" class="label-info"></label>
</div>
</li>
<li class="list-group-item">
BI/Analyst
<div class="material-switch pull-right">
<input id="chkbi" name="chkbi" type="checkbox"/>
<label for="chkbi" class="label-warning"></label>
</div>
</li>
<li class="list-group-item">
Management
<div class="material-switch pull-right">
<input id="chkmgt" name="chkmgt" type="checkbox"/>
<label for="chkmgt" class="label-danger"></label>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>