<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="col-md-6"> <div class="card" style="margin:50px 0"> <!-- Default panel contents --> <div class="card-header">All week (This one will be use for all week by default)</div> <ul class="list-group list-group-flush"> <li class="list-group-item am"> 6 AM <label class="switch "> <input type="checkbox" class="success" checked> <span class="slider round"></span> </label><b>Discount:</b><input type="text"></input><b>Quantity:</b><input type="text"></input> </li> <li class="list-group-item am"> 7 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 8 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 9 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 10 AM <label class="switch "> <input type="checkbox" class="success" checked> <span class="slider round"></span> </label><b>Discount:</b><input type="text"></input><b>Quantity:</b><input type="text"></input> </li> <li class="list-group-item am"> 11 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 12 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 1 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 2 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 3 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 4 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 5 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 6 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 7 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 8 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 9 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 10 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 11 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 12 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 1 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 2 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 3 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 4 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 5 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> </ul> </div> </div> <div class="col-md-6"> <div class="card" style="margin:50px 0"> <!-- Default panel contents --> <div class="card-header"> <select name = "dropdown"> <option value = "Monday" selected>Monday</option> <option value = "Tuesday">Tuesday</option> <option value = "Wednesday">Wednesday</option> <option value = "Thursday">Thursday</option> <option value = "Friday">Friday</option> <option value = "Saturday">Saturday</option> <option value = "Sunday">Sunday</option> </select> This one only available for the selected Day. (If any) </div> <ul class="list-group list-group-flush"> <li class="list-group-item am"> 6 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 7 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 8 AM <label class="switch "> <input type="checkbox" class="success" checked> <span class="slider round"></span> </label><b>Discount:</b><input type="text"></input><b>Quantity:</b><input type="text"></input> </li> <li class="list-group-item am"> 9 AM <label class="switch "> <input type="checkbox" class="success" checked> <span class="slider round"></span> </label><b>Discount:</b><input type="text"></input><b>Quantity:</b><input type="text"></input> </li> <li class="list-group-item am"> 10 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 11 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 12 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 1 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 2 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 3 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 4 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 5 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 6 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 7 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 8 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 9 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 10 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 11 PM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item pm"> 12 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 1 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 2 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 3 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 4 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> <li class="list-group-item am"> 5 AM <label class="switch "> <input type="checkbox" class="success"> <span class="slider round"></span> </label> </li> </ul> </div> </div> </div> </div>

/* The switch - the box around the slider */ .switch { position: relative; display: inline-block; width: 60px; height: 34px; float:left; margin-right:10px; } /* Hide default HTML checkbox */ .switch input {display:none;} /* The slider */ .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: 26px; width: 26px; left: 4px; bottom: 4px; background-color: white; -webkit-transition: .4s; transition: .4s; } input.default:checked + .slider { background-color: #444; } input.primary:checked + .slider { background-color: #2196F3; } input.success:checked + .slider { background-color: #8bc34a; } input.info:checked + .slider { background-color: #3de0f5; } input.warning:checked + .slider { background-color: #FFC107; } input.danger:checked + .slider { background-color: #f44336; } 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%; } .am { background-color: #f5f5f5 !important; } .pm { background-color: #e5f4ff !important; } input { width: 15%; padding:7px; margin:0 7px 0 7px !important; border-radius: 3px; border: 1px solid #D1D3D4; font-weight: normal; } }