<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/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" style="margin-top:20px;"> <div class="row"> <div class="col-md-5"> <div class="btn-group" id="status" data-toggle="buttons"> <label class="btn btn-default btn-on btn-xs active"> <input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label> <label class="btn btn-default btn-off btn-xs "> <input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label> </div> <div class="btn-group" id="status" data-toggle="buttons"> <label class="btn btn-default btn-on btn-sm active"> <input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label> <label class="btn btn-default btn-off btn-sm "> <input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label> </div> <div class="btn-group" id="status" data-toggle="buttons"> <label class="btn btn-default btn-on active"> <input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label> <label class="btn btn-default btn-off"> <input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label> </div> <div class="btn-group" id="status" data-toggle="buttons"> <label class="btn btn-default btn-on btn-lg active"> <input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label> <label class="btn btn-default btn-off btn-lg"> <input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label> </div> </div> </div> <div class="row" style="margin-top:20px"> <div class="col-md-5"> <div class="btn-group" id="status" data-toggle="buttons"> <label class="btn btn-default btn-on-1 btn-sm active"> <input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label> <label class="btn btn-default btn-off-1 btn-sm "> <input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label> </div> <div class="btn-group" id="status" data-toggle="buttons"> <label class="btn btn-default btn-on-2 btn-sm active"> <input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label> <label class="btn btn-default btn-off-2 btn-sm "> <input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label> </div> <div class="btn-group" id="status" data-toggle="buttons"> <label class="btn btn-default btn-on-3 btn-sm active"> <input type="radio" value="1" name="multifeatured_module[module_id][status]" checked="checked">ON</label> <label class="btn btn-default btn-off-3 btn-sm "> <input type="radio" value="0" name="multifeatured_module[module_id][status]">OFF</label> </div> </div> </div> </div>

/* Switch button */ .btn-default.btn-on.active{background-color: #5BB75B;color: white;} .btn-default.btn-off.active{background-color: #DA4F49;color: white;} .btn-default.btn-on-1.active{background-color: #006FFC;color: white;} .btn-default.btn-off-1.active{background-color: #DA4F49;color: white;} .btn-default.btn-on-2.active{background-color: #00D590;color: white;} .btn-default.btn-off-2.active{background-color: #A7A7A7;color: white;} .btn-default.btn-on-3.active{color: #5BB75B;font-weight:bolder;} .btn-default.btn-off-3.active{color: #DA4F49;font-weight:bolder;} .btn-default.btn-on-4.active{background-color: #006FFC;color: #5BB75B;} .btn-default.btn-off-4.active{background-color: #DA4F49;color: #DA4F49;}