"checkbox"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

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/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 ---------->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.9.1/font/bootstrap-icons.css">
<div class="container">
<div class="row">
<form class="quote-form">
<div class="form-group">
<label>What would you like us to do <span>*</span>:</label>
<div class="row">
<div class="col-md-12">
<label class="checkbox">
<input type="checkbox" name="wmservices[]" value="Website Design & Development" checked="">
<p> <i class="bi bi-check-circle-fill"></i> Photoshoot</p>
</label>
<label class="checkbox">
<input type="checkbox" name="wmservices[]" value="e-Commerce Website">
<p><i class="bi bi-check-circle-fill"></i> Videoshoot</p>
</label>
<label class="checkbox">
<input type="checkbox" name="wmservices[]" value="Digital Marketing">
<p><i class="bi bi-check-circle-fill"></i> Digital Marketing</p>
</label>
</div>
<div class="col-md-12 error" id="errServices"></div>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn btn-gradient"><i class="bi bi-send-fill" style="margin-right: 8px;"></i>Request a quote</button>
</div>
<input type="hidden" name="_token" value="ZJT48LQW134ToE8df6LmycqUDo8nGmO9jBpfKvfz">
</form>
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
.quote-form label.checkbox input[type="checkbox"]:checked + p {
font-weight: 600;
}
.quote-form label.checkbox input[type="checkbox"]:checked + p i {
color: #38c574;
}
.quote-form {
margin-top: 30px;
}
.quote-form {
margin-top: 30px;
}
.quote-form .form-group label span {
color: #f00;
}
.quote-form .checkbox {
margin-bottom: 15px;
cursor: pointer;
}
.quote-form .checkbox input[type="checkbox"] {
display: none;
}
.quote-form .checkbox p {
margin-bottom: 0;
border: 1px solid #2b245f78;
padding: 8px 15px;
border-radius: 5px;
font-weight: 400;
font-size: 14px;
-webkit-transition: all 0.3s;
transition: all 0.3s;
}
.quote-form .checkbox p i {
font-size: 18px;
margin-right: 5px;
position: relative;
top: 2px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: