bootstrap forms

1<div class="form-check form-check-inline">
2  <input class="form-check-input" type="checkbox" id="inlineCheckbox1" value="option1">
3  <label class="form-check-label" for="inlineCheckbox1">1</label>
4</div>
5<div class="form-check form-check-inline">
6  <input class="form-check-input" type="checkbox" id="inlineCheckbox2" value="option2">
7  <label class="form-check-label" for="inlineCheckbox2">2</label>
8</div>
9<div class="form-check form-check-inline">
10  <input class="form-check-input" type="checkbox" id="inlineCheckbox3" value="option3" disabled>
11  <label class="form-check-label" for="inlineCheckbox3">3 (disabled)</label>
12</div>

1<div class="col-lg-6 col-md-6 col-12">
2  <div class="input-group mb-3">
3    <div class="input-group-prepend">
4      <select class="form-control select2bs4" name="country_code" id="country_code" style="width: 100%">
5        <option value="+91">+91</option>
6        <option value="+351">+351</option>
7        <option value="+1">+1</option>
8      </select>
9    </div>
10    	<input type="text" name="user" class="form-control" placeholder="Email Or Mobile Number">
11    </div>
12</div>

1<form>
2  <div class="mb-3">
3    <label for="exampleInputEmail1" class="form-label">Email address</label>
4    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
5    <div id="emailHelp" class="form-text">We'll never share your email with anyone else.</div>
6  </div>
7  <div class="mb-3">
8    <label for="exampleInputPassword1" class="form-label">Password</label>
9    <input type="password" class="form-control" id="exampleInputPassword1">
10  </div>
11  <div class="mb-3 form-check">
12    <input type="checkbox" class="form-check-input" id="exampleCheck1">
13    <label class="form-check-label" for="exampleCheck1">Check me out</label>
14  </div>
15  <button type="submit" class="btn btn-primary">Submit</button>
16</form>

1<form class="needs-validation" novalidate>
2  <div class="form-row">
3    <div class="col-md-4 mb-3">
4      <label for="validationCustom01">First name</label>
5      <input type="text" class="form-control" id="validationCustom01" placeholder="First name" value="Mark" required>
6      <div class="valid-feedback">
7        Looks good!
8      </div>
9    </div>
10    <div class="col-md-4 mb-3">
11      <label for="validationCustom02">Last name</label>
12      <input type="text" class="form-control" id="validationCustom02" placeholder="Last name" value="Otto" required>
13      <div class="valid-feedback">
14        Looks good!
15      </div>
16    </div>
17    <div class="col-md-4 mb-3">
18      <label for="validationCustomUsername">Username</label>
19      <div class="input-group">
20        <div class="input-group-prepend">
21          <span class="input-group-text" id="inputGroupPrepend">@</span>
22        </div>
23        <input type="text" class="form-control" id="validationCustomUsername" placeholder="Username" aria-describedby="inputGroupPrepend" required>
24        <div class="invalid-feedback">
25          Please choose a username.
26        </div>
27      </div>
28    </div>
29  </div>
30  <div class="form-row">
31    <div class="col-md-6 mb-3">
32      <label for="validationCustom03">City</label>
33      <input type="text" class="form-control" id="validationCustom03" placeholder="City" required>
34      <div class="invalid-feedback">
35        Please provide a valid city.
36      </div>
37    </div>
38    <div class="col-md-3 mb-3">
39      <label for="validationCustom04">State</label>
40      <input type="text" class="form-control" id="validationCustom04" placeholder="State" required>
41      <div class="invalid-feedback">
42        Please provide a valid state.
43      </div>
44    </div>
45    <div class="col-md-3 mb-3">
46      <label for="validationCustom05">Zip</label>
47      <input type="text" class="form-control" id="validationCustom05" placeholder="Zip" required>
48      <div class="invalid-feedback">
49        Please provide a valid zip.
50      </div>
51    </div>
52  </div>
53  <div class="form-group">
54    <div class="form-check">
55      <input class="form-check-input" type="checkbox" value="" id="invalidCheck" required>
56      <label class="form-check-label" for="invalidCheck">
57        Agree to terms and conditions
58      </label>
59      <div class="invalid-feedback">
60        You must agree before submitting.
61      </div>
62    </div>
63  </div>
64  <button class="btn btn-primary" type="submit">Submit form</button>
65</form>
66
67<script>
68// Example starter JavaScript for disabling form submissions if there are invalid fields
69(function() {
70  'use strict';
71  window.addEventListener('load', function() {
72    // Fetch all the forms we want to apply custom Bootstrap validation styles to
73    var forms = document.getElementsByClassName('needs-validation');
74    // Loop over them and prevent submission
75    var validation = Array.prototype.filter.call(forms, function(form) {
76      form.addEventListener('submit', function(event) {
77        if (form.checkValidity() === false) {
78          event.preventDefault();
79          event.stopPropagation();
80        }
81        form.classList.add('was-validated');
82      }, false);
83    });
84  }, false);
85})();
86</script>

1<form>
2  <div class="form-group row">
3    <label for="staticEmail" class="col-sm-2 col-form-label">Email</label>
4    <div class="col-sm-10">
5      <input type="text" readonly class="form-control-plaintext" id="staticEmail" value="email@example.com">
6    </div>
7  </div>
8  <div class="form-group row">
9    <label for="inputPassword" class="col-sm-2 col-form-label">Password</label>
10    <div class="col-sm-10">
11      <input type="password" class="form-control" id="inputPassword" placeholder="Password">
12    </div>
13  </div>
14</form>

1Example of .form-group
2<form>
3 <div class=”form-group”>
4 <label for=”exampleInputEmail1”>Email 
5
6address</label>
7 <input type=”email” class=”form-control” id=”exampleInputEmail1” ariadescribedby=”emailHelp” placeholder=”Provide email”>
8 </div>
9 <div class=”form-group”>
10 <label for=”exampleInputPassword1”>Your password</label>
11 <input type=”password” class=”form-control” id=”exampleInputPassword1”
12placeholder=”Password”>
13 </div>
14 <div class=”form-group form-check”>
15 <input type=”checkbox” class=”form-check-input” id=”exampleCheck1”>
16 <label class=”form-check-label” for=”exampleCheck1”>Remember me</label>
17 </div>
18 <button type=”submit” class=”btn btn-primary”>Submit</button>
19</form>
20.form-control
21Use this class to style all textual form controls such as user input, titles, etc.
22<form>
23 <div class=”form-group”>
24 <label for=”exampleFormControlInput1”>Email address</label>
25 <input type=”email” class=”form-control” id=”exampleFormControlInput1”
26placeholder=”name@example.com”>
27 </div>
28.form-control-file
29Add this class whenever you need to provide the user with an option to upload a file to the form.
30<input type=”file” class=”form-control-file” id=”exampleFormControlFile1”>
31.form-control-lg and .form-control-sm.
32Create a visual hierarchy within your form by adding .form-control-lg to make bigger input areas and .form-control-sm to
33make smaller ones.
34<input class=”form-control form-control-lg” type=”text” placeholder=”.form-controllg”>
35<input class=”form-control form-control-sm” type=”text” placeholder=”.form-controlsm”>
36
37