Bootstrap 4 Checkbox Validation Code Example


Example 1: bootstrap forms

<form>   <div class="form-group">     <label for="exampleInputEmail1">Email address</label>     <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">     <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>   </div>   <div class="form-group">     <label for="exampleInputPassword1">Password</label>     <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">   </div>   <div class="form-check">     <input type="checkbox" class="form-check-input" id="exampleCheck1">     <label class="form-check-label" for="exampleCheck1">Check me out</label>   </div>   <button type="submit" class="btn btn-primary">Submit</button> </form>

Example 2: bootstrap forms

Example of .form-group <form>  <div class=”form-group”>  <label for=”exampleInputEmail1”>Email   address</label>  <input type=”email” class=”form-control” id=”exampleInputEmail1” ariadescribedby=”emailHelp” placeholder=”Provide email”>  </div>  <div class=”form-group”>  <label for=”exampleInputPassword1”>Your password</label>  <input type=”password” class=”form-control” id=”exampleInputPassword1” placeholder=”Password”>  </div>  <div class=”form-group form-check”>  <input type=”checkbox” class=”form-check-input” id=”exampleCheck1”>  <label class=”form-check-label” for=”exampleCheck1”>Remember me</label>  </div>  <button type=”submit” class=”btn btn-primary”>Submit</button> </form> .form-control Use this class to style all textual form controls such as user input, titles, etc. <form>  <div class=”form-group”>  <label for=”exampleFormControlInput1”>Email address</label>  <input type=”email” class=”form-control” id=”exampleFormControlInput1” placeholder=”name@example.com”>  </div> .form-control-file Add this class whenever you need to provide the user with an option to upload a file to the form. <input type=”file” class=”form-control-file” id=”exampleFormControlFile1”> .form-control-lg and .form-control-sm. Create a visual hierarchy within your form by adding .form-control-lg to make bigger input areas and .form-control-sm to make smaller ones. <input class=”form-control form-control-lg” type=”text” placeholder=.form-controllg”> <input class=”form-control form-control-sm” type=”text” placeholder=.form-controlsm”>

Comments

Popular posts from this blog

Are Regular VACUUM ANALYZE Still Recommended Under 9.1?

Can Feynman Diagrams Be Used To Represent Any Perturbation Theory?