"Available Times Grid List"
Bootstrap 3.3.0 Snippet by lildwitte

<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous"> <div class="row"> <!-- RADIO BUTTONS BLOCK --> <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"> <h3 class="text-center title-center">These are the available time-slots.</h3> <div class="frb-group"> <div class="row"> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-0" name="radio-button" value="0"> <label for="radio-button-0"> <span class="frb-title">Thursday 04/19/2018, ETA 10:30am</span><br/> <span class="frb-description">10:00am to 11:30am</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-1" name="radio-button" value="1"> <label for="radio-button-1"> <span class="frb-title">Thursday 04/19/2018, ETA 11:00am</span><br/> <span class="frb-description">10:30am to 12:00pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-2" name="radio-button" value="2"> <label for="radio-button-2"> <span class="frb-title">Thursday 04/19/2018, ETA 1:30pm</span><br/> <span class="frb-description">1:00pm to 2:30pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-3" name="radio-button" value="3"> <label for="radio-button-3"> <span class="frb-title">Thursday 04/19/2018, ETA 2:00pm</span><br/> <span class="frb-description">1:30pm to 3:00pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-4" name="radio-button" value="4"> <label for="radio-button-4"> <span class="frb-title">Thursday 04/19/2018, ETA 2:30pm</span><br/> <span class="frb-description">2:00pm to 3:30pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-5" name="radio-button" value="5"> <label for="radio-button-5"> <span class="frb-title">Thursday 04/19/2018, ETA 3:00pm</span><br/> <span class="frb-description">2:30pm to 4:00pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-6" name="radio-button" value="6"> <label for="radio-button-6"> <span class="frb-title">Thursday 04/19/2018, ETA 3:30pm</span><br/> <span class="frb-description">3:00pm to 4:30pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-7" name="radio-button" value="7"> <label for="radio-button-7"> <span class="frb-title">Thursday 04/19/2018, ETA 4:00pm</span><br/> <span class="frb-description">3:30pm to 5:00pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-8" name="radio-button" value="8"> <label for="radio-button-8"> <span class="frb-title">Friday 04/20/2018, ETA 1:30pm</span><br/> <span class="frb-description">1:00pm to 2:30pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-9" name="radio-button" value="9"> <label for="radio-button-9"> <span class="frb-title">Friday 04/20/2018, ETA 2:00pm</span><br/> <span class="frb-description">1:30pm to 3:00pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-10" name="radio-button" value="10"> <label for="radio-button-10"> <span class="frb-title">Saturday 04/21/2018, ETA 10:30am</span><br/> <span class="frb-description">10:00am to 11:30am</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-11" name="radio-button" value="11"> <label for="radio-button-11"> <span class="frb-title">Saturday 04/21/2018, ETA 11:00am</span><br/> <span class="frb-description">10:30am to 12:00pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-12" name="radio-button" value="12"> <label for="radio-button-12"> <span class="frb-title">Saturday 04/21/2018, ETA 3:00pm</span><br/> <span class="frb-description">2:30pm to 4:00pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-13" name="radio-button" value="13"> <label for="radio-button-13"> <span class="frb-title">Saturday 04/21/2018, ETA 3:30pm</span><br/> <span class="frb-description">3:00pm to 4:30pm</span> </label> </div> <div class="frb frb-default col-xs-12 col-sm-12 col-md-6 col-lg-4 col-xl-4"> <input type="radio" id="radio-button-14" name="radio-button" value="14"> <label for="radio-button-14"> <span class="frb-title">Saturday 04/21/2018, ETA 4:00pm</span><br/> <span class="frb-description">3:30pm to 5:00pm</span> </label> </div> </div> <div class="col-xl-12 col-lg-12 col-md-12 col-sm-12 col-12"> <input type="submit" class="btn btn-primary btn-block" value="Schedule Appointment"> </div> </div> </div> <script type="text/javascript" src="./resources/plugins/jquery-3.2.1/js/jquery.min.js"></script> <script type="text/javascript" src="./resources/plugins/bootstrap-3.3.7/js/bootstrap.min.js"></script>
.frb-group { margin: 15px 0; } .frb { margin-top: 15px; } .frb input[type="radio"]:empty, .frb input[type="checkbox"]:empty { display: none; } .frb input[type="radio"] ~ label:before, .frb input[type="checkbox"] ~ label:before { font-family: FontAwesome; content: '\f096'; position: absolute; top: 50%; margin-top: -11px; left: 15px; font-size: 22px; } .frb input[type="radio"]:checked ~ label:before, .frb input[type="checkbox"]:checked ~ label:before { content: '\f046'; } .frb input[type="radio"] ~ label, .frb input[type="checkbox"] ~ label { position: relative; cursor: pointer; width: 100%; border: 1px solid #ccc; border-radius: 5px; background-color: #f2f2f2; } .frb input[type="radio"] ~ label:focus, .frb input[type="radio"] ~ label:hover, .frb input[type="checkbox"] ~ label:focus, .frb input[type="checkbox"] ~ label:hover { box-shadow: 0px 0px 3px #333; } .frb input[type="radio"]:checked ~ label, .frb input[type="checkbox"]:checked ~ label { color: #fafafa; } .frb input[type="radio"]:checked ~ label, .frb input[type="checkbox"]:checked ~ label { background-color: #f2f2f2; } .frb.frb-default input[type="radio"]:checked ~ label, .frb.frb-default input[type="checkbox"]:checked ~ label { color: #333; } .frb.frb-primary input[type="radio"]:checked ~ label, .frb.frb-primary input[type="checkbox"]:checked ~ label { background-color: #337ab7; } .frb.frb-success input[type="radio"]:checked ~ label, .frb.frb-success input[type="checkbox"]:checked ~ label { background-color: #5cb85c; } .frb.frb-info input[type="radio"]:checked ~ label, .frb.frb-info input[type="checkbox"]:checked ~ label { background-color: #5bc0de; } .frb.frb-warning input[type="radio"]:checked ~ label, .frb.frb-warning input[type="checkbox"]:checked ~ label { background-color: #f0ad4e; } .frb.frb-danger input[type="radio"]:checked ~ label, .frb.frb-danger input[type="checkbox"]:checked ~ label { background-color: #d9534f; } .frb input[type="radio"]:empty ~ label span, .frb input[type="checkbox"]:empty ~ label span { display: inline-block; } .frb input[type="radio"]:empty ~ label span.frb-title, .frb input[type="checkbox"]:empty ~ label span.frb-title { font-size: 16px; font-weight: 700; margin: 5px 5px 5px 50px; } .frb input[type="radio"]:empty ~ label span.frb-description, .frb input[type="checkbox"]:empty ~ label span.frb-description { font-weight: normal; font-style: italic; color: #999; margin: 5px 5px 5px 50px; } .frb input[type="radio"]:empty:checked ~ label span.frb-description, .frb input[type="checkbox"]:empty:checked ~ label span.frb-description { color: #fafafa; } .frb.frb-default input[type="radio"]:empty:checked ~ label span.frb-description, .frb.frb-default input[type="checkbox"]:empty:checked ~ label span.frb-description { color: #999; }

Related: See More


Questions / Comments: