Bootstrap Snippet Use div, label as checkbox using HTML CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<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 ---------->
<div class="container mt-5">
    <div class="ans_checkbox">
                        
            <input type="checkbox" name="rGroup" value="1" id="r1"/>
            <label class="checkbox-alias" for="r1"><div class="ans_abc">1</div> Option 1</label>
            <input type="checkbox" name="rGroup" value="2" id="r2"/>
            <label class="checkbox-alias" for="r2"><div class="ans_abc">2</div> Option 2</label>
            <input type="checkbox" name="rGroup" value="3" id="r3"/>
            <label class="checkbox-alias" for="r3"><div class="ans_abc">3</div> Option 3</label>
            <input type="checkbox" name="rGroup" value="3" id="r4"/>
            <label class="checkbox-alias" for="r4"><div class="ans_abc">4</div> Option 4</label>
        
    </div>
</div>
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
.checkbox-alias{
 background-color: #f9f9f9;
    display: inline-block;
    width: 47%;
    z-index: 1;
    position: relative;
    transition: all 250ms ease-out;
    cursor: pointer;
    border: 1px solid #efefef;
    padding: 12px 12px;
}
.ans_checkbox input[type=checkbox]{
  display: none;
   margin-right: -20px;
  position: relative;
  z-index: 2; 
}
.ans_checkbox input[type=checkbox]:checked + .checkbox-alias{
    border-color: #5555F2;
    background: #5555f240;
    color: #000;
}
.ans_abc{
    background: #5555F2;
    display: inline-block;
    width: 25px;
    height: 25px;
    color: #fff;
    text-align: center;
    border-radius: 50px;
    margin-right: 9px;
    padding-top: 1px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"Use div, label as checkbox"
Bootstrap 4.1.1 Snippet by mdwaris198

Related: See More

Questions / Comments:

"Use div, label as checkbox" Bootstrap 4.1.1 Snippet by mdwaris198

Related: See More

Questions / Comments:

"Use div, label as checkbox"
Bootstrap 4.1.1 Snippet by mdwaris198