bootstrap 4 forms

1<form>
2  <div class="form-group">
3    <label for="exampleFormControlInput1">Email address</label>
4    <input type="email" class="form-control" id="exampleFormControlInput1" placeholder="name@example.com">
5  </div>
6  <div class="form-group">
7    <label for="exampleFormControlSelect1">Example select</label>
8    <select class="form-control" id="exampleFormControlSelect1">
9      <option>1</option>
10      <option>2</option>
11      <option>3</option>
12      <option>4</option>
13      <option>5</option>
14    </select>
15  </div>
16  <div class="form-group">
17    <label for="exampleFormControlSelect2">Example multiple select</label>
18    <select multiple class="form-control" id="exampleFormControlSelect2">
19      <option>1</option>
20      <option>2</option>
21      <option>3</option>
22      <option>4</option>
23      <option>5</option>
24    </select>
25  </div>
26  <div class="form-group">
27    <label for="exampleFormControlTextarea1">Example textarea</label>
28    <textarea class="form-control" id="exampleFormControlTextarea1" rows="3"></textarea>
29  </div>
30</form>

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>

1<div class="form-group">
2    <label for="birthday" class="col-xs-2 control-label">Birthday</label>
3    <div class="col-xs-10">
4        <div class="form-inline">
5            <div class="form-group">
6                <input type="text" class="form-control" placeholder="year"/>
7            </div>
8            <div class="form-group">
9                <input type="text" class="form-control" placeholder="month"/>
10            </div>
11            <div class="form-group">
12                <input type="text" class="form-control" placeholder="day"/>
13            </div>
14        </div>
15    </div>
16</div>

1<form>
2  <div class="row">
3    <div class="col">
4      <input type="text" class="form-control" placeholder="First name">
5    </div>
6    <div class="col">
7      <input type="text" class="form-control" placeholder="Last name">
8    </div>
9  </div>
10</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

1<form>
2  <div class="form-row align-items-center">
3    <div class="col-auto">
4      <label class="sr-only" for="inlineFormInput">Name</label>
5      <input type="text" class="form-control mb-2" id="inlineFormInput" placeholder="Jane Doe">
6    </div>
7    <div class="col-auto">
8      <label class="sr-only" for="inlineFormInputGroup">Username</label>
9      <div class="input-group mb-2">
10        <div class="input-group-prepend">
11          <div class="input-group-text">@</div>
12        </div>
13        <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username">
14      </div>
15    </div>
16    <div class="col-auto">
17      <div class="form-check mb-2">
18        <input class="form-check-input" type="checkbox" id="autoSizingCheck">
19        <label class="form-check-label" for="autoSizingCheck">
20          Remember me
21        </label>
22      </div>
23    </div>
24    <div class="col-auto">
25      <button type="submit" class="btn btn-primary mb-2">Submit</button>
26    </div>
27  </div>
28</form>