Background Toggle

A Toggle switch and background colour selector

HTML

<link rel="stylesheet" href="http://bootswatch.com/cerulean/bootstrap.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.0rc/js/bootstrap-switch.js"></script>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/bootstrap-switch/3.0.0rc/css/bootstrap2/bootstrap-switch.css">
 <div id="settingsBar" class="">
<div class="well bs-component col-sm-6">
                <form class="form-horizontal">
                    <fieldset>
                        <legend style="color: #ccc;">General</legend>
                        <div class="form-group row">
                            <label for="txtBackColor" class="col-sm-12 col-md-3 col-lg-4 control-label">Background Colour</label>
                            <div class="col-sm-12 col-md-9 col-lg-8 row">
                                <div class="col-xs-1 col-sm-0"></div>
                                
<input id="tglBackColor" type="checkbox" name="tglBackColor" class="bootstrap-toggle form-control" checked data-on-color="success" data-off-color="danger">
                                <input id="txtBackColor" type="text" class="colorPicker form-control col-xs-10 col-sm-7 col-md-10 col-lg-11" />                                        
                            </div>
                        </div>
                       
                       
                          
                    </fieldset>
                </form>
               
    </div></div>

CSS

/* Colours */
body {
  background-color: #000000;
  position: absolute;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  overflow: hidden;
  margin: 0px;
  border: 0px;
  min-width: 398px;
}
.toggle {
  width: 105px !important;
  height: 38px;
  margin-top: 1px !important;
  overflow: auto;
}
/* Represents the top settings area */
#settingsBar {
  background-color: #333333;
  padding: 10px;
  border: thin solid #444444;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
  font-family: verdana, helvetica, arial, sans-serif;
  /* Color field labels appropriately and set some padding */

}
#settingsBar label {
  color: #cccccc;
}
#settingsBar label.control-label {
  padding-bottom: 15px;
}
#settingsBar .form-control {
  margin-top: -1px;
  width: auto;
  margin-left: 10px;
}
#settingsBar .bootstrap-switch {
  padding-left: 0px;
  padding-right: 0px;
}
@media (min-width: 767px) {
  #settingsBar {
    /* Ensure that the label never right aligns */
  
  }
  #settingsBar label.control-label {
    text-align: left;
  }
  #settingsBar .bootstrap-switch {
    margin-left: 30px !important;
  }
}
@media (max-width: 991px) {
  #settingsBar {
    /* Ensure that the label never right aligns */
  
  }
  #settingsBar label.control-label {
    text-align: start;
  }
  #settingsBar .bootstrap-switch {
    /*margin-left: 30px !important;*/
  
  }
}
.colorPicker {
  margin-left: 5px;
  border: 0;
  border-right: 20px solid green;
  line-height: 20px;
}
/* Represents the clickable button areas */
.panel {
  background-color: #333333;
  border: thin solid #444444;
  /* Corners */

  border-top-left-radius: 0px;
  border-top-right-radius: 0px;
  -moz-border-radius-bottomleft: 10px;
  -webkit-border-bottom-left-radius: 10px;
  border-bottom-left-radius: 10px;
  -moz-border-radius-bottomright: 10px;
  -webkit-border-bottom-right-radius: 10px;
  border-bottom-right-radius: 10px;
  /* Layout */

  overflow: hidden;
 ...

JavaScript

$("#chktest").bootstrapSwitch();
$('.bootstrap-toggle').bootstrapSwitch('size', 'large');
$("div.bootstrap-switch").addClass("col-xs-2 col-sm-3 col-md-2 col-lg-1");