"checkbox"
Bootstrap 4.1.1 Snippet by SANTANU CHOWDHURY

<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> </div> </div>
.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; color: #ccc; }

Related: See More


Questions / Comments: