Make Fiddle page is Bootstrap enabled

How to make jsfiddle bootstrap enabled example . more : code2care.org

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<button onclick="checkAll()">
 Accept ALL
</button> 
<button onclick="uncheckAll()">
 Reject  ALL
</button> 
 <div class="modal-body">
   <div class="container-fluid">
     <div>
       <div class="row">
         <div class="col-md-10">
           <h2>Essential</h2>
           <p class="gdpr_justify">
             These cookies ensure that our website performs as expected,
             for example website traffic load is balanced across our servers to prevent our website from
             crashing during particularly high usage.
           </p>
         </div>
         <div class="col-md-2">
           <label class="switch">
             <input type="checkbox" class="check" checked>
             <span class="slider round"></span>
           </label>
         </div>
       </div>
       <div class="row">
         <div class="col-md-10">
           <h2>Non-Essential</h2>
           <h4>Functional</h4>
           <p class="gdpr_justify">
             These cookies allow our website to remember choices you make (such as your user name,
             language or the region you are in) and provide enhanced features. These cookies do not gather any information about you that could be used for advertising or remember where you have been on the internet.
           </p>
         </div>
         <div class="col-md-2">
           <label class="switch">
             <input type="checkbox" class="check"  disabled>
             <span class="slider round"></span>
           </label>
         </div>
       </div>
       <div class="row">
         <div class="col-md-10">
           <h4>Marketing</h4>
           <p class="gdpr_justify">
             These cookies ensure that our website performs as expected,
             for example website traffic load is balanced across our servers to prevent our website from c
             rashing during particularly high usage.
           </p>
 ...

CSS

.switch {
  position: relative;
  display: inline-block;
  width: 55px;
  height: 24px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 20px;
  width: 20px;
  left: 4px;
  bottom: 2px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #2196F3;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

/* Rounded sliders */
.slider.round {
  border-radius: 34px;
}

.slider.round:before {
  border-radius: 50%;
}

JavaScript

function checkAll() {
  var inputs = document.querySelectorAll('.check');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = true;
  }
}

function uncheckAll() {
  var inputs = document.querySelectorAll('.check');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}

window.onload = function() {
  window.addEventListener('load', checkAll, false);
}