Bootstrap Snippet Available Times Grid List using HTML CSS Bootstrap

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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/>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
.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;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Available Times Grid List"
Bootstrap 3.3.0 Snippet by lildwitte

Related: See More

Questions / Comments:

"Available Times Grid List" Bootstrap 3.3.0 Snippet by lildwitte

Related: See More

Questions / Comments:

"Available Times Grid List"
Bootstrap 3.3.0 Snippet by lildwitte