<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">Notification center</h3> <hr> <div class="col-xs-12"> <p class="lead text-center">This is what an implementation of our notification center could look like on the user side.</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">Benachrichtigungen</div> <!-- List group --> <ul class="list-group"> <li class="list-group-item"> Eilmeldungen <div class="material-switch pull-right"> <input id="someSwitchOptionDefault" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionDefault" class="label-warning"></label> </div> </li> <li class="list-group-item"> Redaktionsempfehlungen <div class="material-switch pull-right"> <input id="someSwitchOptionPrimary" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionPrimary" class="label-primary"></label> </div> </li> </ul> <div class="panel-heading">Aktuelle Themen</div> <ul class="list-group"> <li class="list-group-item"> US-Wahl <div class="material-switch pull-right"> <input id="someSwitchOptionSuccess" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionSuccess" class="label-default"></label> </div> </li> <li class="list-group-item"> Putschversuch in der Türkei <div class="material-switch pull-right"> <input id="someSwitchOptionInfo" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionInfo" class="label-default"></label> </div> </li> <li class="list-group-item"> Amoklauf in München <div class="material-switch pull-right"> <input id="someSwitchOptionWarning" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionWarning" class="label-default"></label> </div> </li> </ul> <div class="panel-heading">Serien</div> <ul class="list-group"> <li class="list-group-item"> Fischer im Recht <div class="material-switch pull-right"> <input id="someSwitchOptionFischer" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionFischer" class="label-default"></label> </div> </li> <li class="list-group-item"> Fünf vor Acht <div class="material-switch pull-right"> <input id="someSwitchOption5" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOption5" class="label-default"></label> </div> </li> <li class="list-group-item"> Kiyaks Deutschstunde <div class="material-switch pull-right"> <input id="someSwitchOptionMely" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionMely" class="label-default"></label> </div> </li> </ul> <ul class="list-group"> <li class="list-group-item" style="background-color:#f5f5f5;"> Bitte nicht stören <div class="material-switch pull-right"> <input id="someSwitchOptionNodisturb" name="someSwitchOption001" type="checkbox"/> <label for="someSwitchOptionNodisturb" class="label-info"></label> </div> </li> </ul> <div class="panel-heading" style="height:90px">Häufigkeit der Benachrichtigungen</div> </div> </div> </div> </div>

.material-switch > input[type="checkbox"] { display: none; } .material-switch > label { cursor: pointer; height: 0px; position: relative; width: 40px; } .material-switch > label::before { background: rgb(0, 0, 0); box-shadow: inset 0px 0px 10px rgba(0, 0, 0, 0.5); border-radius: 8px; content: ''; height: 16px; margin-top: -8px; position:absolute; opacity: 0.3; transition: all 0.4s ease-in-out; width: 40px; } .material-switch > label::after { background: rgb(255, 255, 255); border-radius: 16px; box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.3); content: ''; height: 24px; left: -4px; margin-top: -8px; position: absolute; top: -4px; transition: all 0.3s ease-in-out; width: 24px; } .material-switch > input[type="checkbox"]:checked + label::before { background: inherit; opacity: 0.5; } .material-switch > input[type="checkbox"]:checked + label::after { background: inherit; left: 20px; }