<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="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <div class="boxes"> <input type="checkbox" id="box-1"> <label for="box-1">Sustainable typewriter cronut</label> <input type="checkbox" id="box-2" checked> <label for="box-2">Gentrify pickled kale chips </label> <input type="checkbox" id="box-3"> <label for="box-3">Gastropub butcher</label> </div> </div> </div>

@import url(https://fonts.googleapis.com/css?family=Open+Sans); /*Page styles*/ html { height: 100%; } body { height: 100%; margin: 0; background: #363636; display: -webkit-flex; display: flex; align-items: center; } .boxes { margin: auto; padding: 50px; background: #484848; } /*Checkboxes styles*/ input[type="checkbox"] { display: none; } input[type="checkbox"] + label { display: block; position: relative; padding-left: 35px; margin-bottom: 20px; font: 14px/20px 'Open Sans', Arial, sans-serif; color: #ddd; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; } input[type="checkbox"] + label:last-child { margin-bottom: 0; } input[type="checkbox"] + label:before { content: ''; display: block; width: 20px; height: 20px; border: 1px solid #6cc0e5; position: absolute; left: 0; top: 0; opacity: .6; -webkit-transition: all .12s, border-color .08s; transition: all .12s, border-color .08s; } input[type="checkbox"]:checked + label:before { width: 10px; top: -5px; left: 5px; border-radius: 0; opacity: 1; border-top-color: transparent; border-left-color: transparent; -webkit-transform: rotate(45deg); transform: rotate(45deg); }