<note> This Code Write inside <form> tag

									/* For Email Address */

									<div class="form-group">
										<label for="exampleInputEmail1" class="form-control-label">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>

									/* For Password */

									<div class="form-group">
										<label for="exampleInputPassword1" class="form-control-label">Password</label>
											<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
									</div>

									/* For Dropdown */

									<div class="form-group">
										<label for="exampleSelect1" class="form-control-label">Example select</label>
											<select class="form-control" id="exampleSelect1">
												<option>1</option>
												<option>2</option>
												<option>3</option>
												<option>4</option>
												<option>5</option>
											</select>
									</div>

									/* for multiple select */

									<div class="form-group">
										<label for="exampleSelect2" class="form-control-label">Example multiple select</label>
											<select multiple class="form-control multiple-select" id="exampleSelect2">
												<option>1</option>
												<option>2</option>
												<option>3</option>
												<option>4</option>
												<option>5</option>
											</select>
									</div>

									/* for textarea */

									<div class="form-group">
										<label for="exampleTextarea" class="form-control-label">Example textarea</label>
											<textarea class="form-control" id="exampleTextarea" rows="4"></textarea>
									</div>

									/* For Radio Button */

									<fieldset class="form-group">
										/* Checked Radio Button*/
										<div class="form-check">
											<label for="optionsRadios1" class="form-check-label">
												<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios1" valu6="option1" checked>
													Option one is this and that—be sure to include why it's great
											</label>
										</div>

										/* Not Checked Radio Button*/

										<div class="form-check">
											<label for="optionsRadios2" class="form-check-label">
												<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios2" value="option2">
													Option two can be something else and selecting it will deselect option one
												</label>
										</div>

										/* Disable Radio Button */

										<div class="form-check disabled">
											<label for="optionsRadios3" class="form-check-label">
												<input type="radio" class="form-check-input" name="optionsRadios" id="optionsRadios3" value="option3" disabled>
													Option three is disabled
											</label>
										</div>
									</fieldset>

									/* use for multiple checkbox */

									<div class="form-check">
										<label for="chkme" class="form-check-label">
											<input type="checkbox" class="form-check-input" id="chkme">Check me out
										</label>
									</div>
										<div class="form-check">
											<label class="form-check-label">
												<input class="form-check-input" type="checkbox">
													Option one is this and that—be sure to include why it's great
											</label>
										</div>

									/* use for disable checkbox */

									<div class="form-check disabled">
										<label class="form-check-label">
											<input class="form-check-input" type="checkbox" disabled>
												Option two is disabled
											</label>
										</div>
									<button type="submit" class="btn btn-success waves-effect waves-light">Submit
									</button>
                      			

                      	<note> This Code Write inside <form> tag

						/* use for text textual input */

						<div class="form-group row">
							<label for="example-text-input" class="col-xs-2 col-form-label form-control-label">Text<label>
								<div class="col-sm-10">
									<input class="form-control" type="text" value="Artisanal kale" id="example-text-input">
								</div>
						</div>

						/* use for search textual input */

						<div class="form-group row">
							<label for="example-search-input" class="col-xs-2 col-form-label form-control-label">Search</label>
							<div class="col-sm-10">
								<input class="form-control" type="search" value="How do I shoot web" id="example-search-input">
							</div>
						</div>

						/* use for email textual input */

						<div class="form-group row">
							<label for="example-email-input" class="col-xs-2 col-form-label form-control-label">Email</label>
							<div class="col-sm-10">
								<input class="form-control" type="email" value="bootstrap@example.com" id="example-email-input">
							</div>
						</div>

						/* use for Url textual input */

						<div class="form-group row">
							<label for="example-url-input" class="col-xs-2 col-form-label form-control-label">URL</label>
							<div class="col-sm-10">
								<input class="form-control" type="url" value="https://getbootstrap.com" id="example-url-input">
							</div>
						</div>

						/* use for Telephone textual input */

						<div class="form-group row">
							<label for="example-tel-input" class="col-xs-2 col-form-label form-control-label">Telephone</label>
							<div class="col-sm-10">
								<input class="form-control" type="tel" value="1-(555)-555-5555" id="example-tel-input">
							</div>
						</div>

						/* use for Password textual input */

						<div class="form-group row">
							<label for="example-password-input" class="col-xs-2 col-form-label form-control-label">Password</label>
							<div class="col-sm-10">
								<input class="form-control" type="password" value="hunter2" id="example-password-input">
							</div>
						</div>

						/* use for Static Control textual input */

						<div class="form-group row">
							<label class="col-sm-2 col-form-label form-control-label">Static Control</label>
							<div class="col-sm-10">
								<p class="form-control-static">email@example.com</p>
							</div>
						</div>

						/* use for Number textual input */

						<div class="form-group row">
							<label for="example-number-input" class="col-xs-2 col-form-label form-control-label">Number</label>
							<div class="col-sm-10">
								<input class="form-control" type="number" value="42" id="example-number-input">
							</div>
						</div>

						/* use for Date and Time textual input */

						<div class="form-group row">
							<label for="example-datetime-local-input" class="col-xs-2 col-form-label form-control-label">Date and time</label>
							<div class="col-sm-10">
								<input class="form-control" type="datetime-local" value="2011-08-19T13:45:00" id="example-datetime-local-input">
							</div>
						</div>

						/* use for Date textual input */

						<div class="form-group row">
							<label for="example-date-input" class="col-xs-2 col-form-label form-control-label">Date</label>
							<div class="col-sm-10">
								<input class="form-control" type="date" value="2011-08-19" id="example-date-input">
							</div>
						</div>

						/* use for Month textual input */

						<div class="form-group row">
							<label for="example-month-input" class="col-xs-2 col-form-label form-control-label">Month</label>
							<div class="col-sm-10">
								<input class="form-control" type="month" value="2011-08" id="example-month-input">
							</div>
						</div>

						/* use for Week textual input */

						<div class="form-group row">
							<label for="example-week-input" class="col-xs-2 col-form-label form-control-label">Week</label>
							<div class="col-sm-10">
								<input class="form-control" type="week" value="2011-W33" id="example-week-input">
							</div>
						</div>

						/* use for Time textual input */

						<div class="form-group row">
							<label for="example-time-input" class="col-xs-2 col-form-label form-control-label">Time</label>
							<div class="col-sm-10">
								<input class="form-control" type="time" value="13:45:00" id="example-time-input">
							</div>
						</div>

						/* use for Color textual input */

						<div class="form-group row">
							<label for="example-color-input" class="col-xs-2 col-form-label form-control-label">Color</label>
							<div class="col-sm-10">
								<input type="color" class="" name="favcolor" value="#1b8bf9" id="example-color-input">
							</div>
						</div>

						/* use for File Upload Textual */

						<div class="form-group row">
							<label for="file" class="col-md-2 col-form-label form-control-label">File input</label>
							<div class="col-md-9">
								<label for="file" class="custom-file">
									<input type="file" id="file" class="custom-file-input">
									<span class="custom-file-control"></span>
								</label>
							</div>
						</div>
                      

				                      /* for input with success */

										<div class="form-group has-success">
										    <label class="form-control-label" for="inputSuccess1">Input with success</label>
										        <input type="text" class="form-control form-control-success" id="inputSuccess1">
										            <div class="form-control-feedback">Success! You've done it.</div>
										                <small class="form-text text-muted">Example help text that remains unchanged.</small>
										</div>

										/* for input with warning */

										<div class="form-group has-warning">
										    <label class="form-control-label" for="inputWarning1">Input with warning</label>
										        <input type="text" class="form-control form-control-warning" id="inputWarning1">
										            <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div>
										                <small class="form-text text-muted">Example help text that remains unchanged.</small>
										</div>

										/* for input with danger */

										<div class="form-group has-danger">
										    <label class="form-control-label" for="inputDanger1">Input with danger</label>
										        <input type="text" class="form-control form-control-danger" id="inputDanger1">
										            <div class="form-control-feedback">Sorry, that username's taken. Try another?</div>
										                <small class="form-text text-muted">Example help text that remains unchanged.</small>
										</div>

										/* for checkbox */

										<div class="form-group">
											<div class="checkbox-color checkbox-primary">
												<input id="checkbox1" type="checkbox" checked="checked">
													<label for="checkbox1" class="text-primary">primary</label>
											</div>
											<div class="checkbox-color checkbox-success">
												<input id="checkbox2" type="checkbox" checked="checked">
													<label for="checkbox2" class="text-success">Success</label>
											</div>
											<div class="checkbox-color checkbox-danger">
												<input id="checkbox3" type="checkbox" checked="checked">
													<label for="checkbox3" class="text-danger">Danger</label>
											</div>
										</div>
                      			  	

	                      	/* for input success */

							<div class="form-group row">
							    <div class="col-md-2 txt-success">
							    	<label for="InputSuccess" class="form-control-label">Success</label>
							    </div>
							    <div class="col-md-10">
							    	<input type="text" class="form-control input-success" id="InputSuccess">
							    </div>
							</div>

							/* for input Warning */

							<div class="form-group row">
							    <div class="col-md-2 txt-warning">
							    	<label for="InputWarning" class="form-control-label">Warning</label>
							    </div>
							    <div class="col-md-10">
							    	<input type="text" class="form-control input-warning" id="InputWarning" ></div>
							</div>

							/* for input Danger */

							<div class="form-group row">
							    <div class="col-md-2 txt-danger">
							    	<label for="InputDanger" class="form-control-label">Danger</label>
							    </div>
							    <div class="col-md-10">
							    	<input type="text" class="form-control input-danger" id="InputDanger"></div>
							</div>

							/* for input with success */

							<div class="form-group row">
							    <div class="col-md-2 txt-success">
							    	<label class="form-control-label">Input with success</label>
							    </div>
							    <div class="col-md-10">
							        <input type="text" class="form-control input-success" id="inputWithSuccess">
							            <i class="fa fa-check input-icon txt-success"></i>
							    </div>
							</div>

							/* for input with warning */

							<div class="form-group row">
							    <div class="col-md-2 txt-warning">
							    	<label class="form-control-label">Input with warning</label>
							    </div>
							    <div class="col-md-10">
									<input type="text" class="form-control input-warning" id="inputWithWarning">
									<i class="fa fa-exclamation-triangle input-icon txt-warning"></i>
								</div>
							</div>

							/* for input with danger */

							<div class="form-group row">
							    <div class="col-md-2 txt-danger">
							    	<label class="form-control-label">Input with Danger</label>
							    </div>
							    <div class="col-md-10">
									<input type="text" class="form-control input-danger" id="inputWithDanger">
									<i class="fa fa-times input-icon txt-danger"></i>
								</div>
							</div>

							/* for input By Checkbox */

							<div class="form-group row">
								<div class="col-md-2">
									<label for="chkcustom" class="form-control-label">Checkbox</label>
								</div>
								<div class="col-md-10 has-success">
									<label class="custom-control custom-checkbox">
										<input type="checkbox" class="custom-control-input">
										<span class="custom-control-indicator"></span>
										<span class="custom-control-description">Check this custom checkbox</span>
									</label>
								</div>
							</div>

							/* for input By Radio */

							<div class="form-group row">
								<div class="col-md-2">
									<label for="radio1" class="form-control-label">Radio Button</label>
								</div>
								<div class="col-md-10 has-danger">
									<label class="custom-control custom-radio">
										<input id="radio1" name="radio" type="radio" class="custom-control-input">
										<span class="custom-control-indicator"></span>
										<span class="custom-control-description">Toggle this custom radio</span>
									</label>
								</div>
							</div>
         			

				                      /* use for small input size */

										<div class="form-group row">
										    <label for="InputSmall" class="col-md-2 form-control-label">Small</label>
										        <div class="col-md-10">
										        	<input type="text" class="form-control form-control-sm" id="InputSmall" placeholder="form-control-sm">
										        </div>
										</div>

										/* use for Normal input size */

										<div class="form-group row">
											<div class="col-md-2">
												<label for="InputNormal" class="form-control-label">Normal</label>
											</div>
											<div class="col-md-10">
												<input type="text" class="form-control" id="InputNormal"  placeholder="Normal">
											</div>
										</div>

										/* use for Large input size */

										<div class="form-group row">
											<div class="col-md-2">
												<label for="InputLarge" class="form-control-label col-form-label-lg">Large</label>
											</div>
											<div class="col-md-10">
												<input type="text" class="form-control form-control-lg" id="InputLarge"  placeholder="form-control-lg">
											</div>
										</div>

										/* Grid Sizes */

										/* use for col-xs-3 */

										<div class="form-group row">
											<div class="col-md-2">
												<label for="InputLarge" class="form-control-label">Grid</label>
											</div>
											<div class="col-xs-3">
												<input type="text" class="form-control" placeholder=".col-xs-3">
											</div>
										</div>

										/* use for col-xs-6 */

										<div class="form-group row">
											<div class="col-md-2"></div>
											<div class="col-xs-6">
												<input type="text" class="form-control" placeholder=".col-xs-6">
											</div>
										</div>

										/* use for col-xs-9 */

										<div class="form-group row">
											<div class="col-md-2"></div>
											<div class="col-xs-9">
												<input type="text" class="form-control" placeholder=".col-xs-9">
											</div>
										</div>
                      				 

			                      <note>Write this code inside <form> tag

									/* For Email Address*/

									<div class="form-group">
									    <label for="exampleInputEmail" class="form-control-label">Email address</label>
									        <input type="email" class="form-control" id="exampleInputEmail" placeholder="Enter email">
									</div>

									/* For Password*/

									<div class="form-group">
									    <label for="exampleInputPassword" class="form-control-label">Password</label>
									        <input type="password" class="form-control" id="exampleInputPassword" placeholder="Password">
									</div>

									/* For checkbox */

									<div class="form-group">
									    <div class="checkbox checkbox-primary" id="chkremember">
									            <input type="checkbox">
									                <label>Remember me</label>
									    </div>
									</div>

									/* for submit button */

									<button type="submit" class="btn btn-success waves-effect waves-light">Sign in
									</button>
                      			  

			                      	<note>Write this code inside <form> tag

									/* For Email Address*/

									<div class="form-group row">
										<label for="h-email" class="col-md-2 col-form-label form-control-label">Email</label>
										<div class="col-md-10">
											<input type="email" id="h-email" class="form-control" placeholder="Email">
										</div>
									</div>

									/* For Password*/

									<div class="form-group row">
										<label for="h-pwd" class="col-md-2 col-form-label form-control-label">Password</label>
										<div class="col-md-10">
											<input id="h-pwd" type="password" class="form-control" placeholder="Password">
										</div>
									</div>

									/* For Confirm Password*/

									<div class="form-group row">
										<label for="h-re-pwd" class="col-md-2 col-form-label form-control-label">Confirm Password</label>
										<div class="col-md-10">
											<input id="h-re-pwd" type="password" class="form-control" placeholder="Re Enter Password">
										</div>
									</div>

									/* For checkbox */

									<div class="form-group row">
										<div class="checkbox checkbox-primary">
											<div class="col-md-10">
												<input type="checkbox" id="chkremeberme">
												<label for="chkremeberme">Remember me</label>
											</div>
										</div>
									</div>

									/* for submit button */

									<div class="form-group row">
										<div class="col-md-9">
											<button type="submit" class="btn btn-primary waves-effect waves-light">
												Sign in
											</button>
										</div>
									</div>
                      			  

			                      		/* For Left Alignment */

										<div class="form-group row">
											<div class="col-md-2">
												<label class="col-form-label" for="alighaddon2">Align</label>
											</div>
											<div class="col-md-10">
												<div class="input-group">
													<span class="input-group-addon" id="alighaddon1">@</span>
														<input type="text" class="form-control" placeholder="Username">
												</div>
											</div>
										</div>

										/* For Right Alignment */

										<div class="form-group row">
											<div class="col-md-2">
												<label class="sr-only" for="alighaddon2">Align addon</label>
											</div>
											<div class="col-md-10">
												<div class="input-group">
													<input type="number" id="alighaddon2" class="form-control" placeholder="Percentage" aria-describedby="basic-addon2">
														<span class="input-group-addon" id="basic-addon2">%</span>
												</div>
											</div>
										</div>

										/* For Group Alignment */

										<div class="form-group row">
											<div class="col-md-2">
												<label class="sr-only" for="alighaddon3">Align addon</label>
											</div>
											<div class="col-md-10">
												<div class="input-group">
													<span class="input-group-addon" id="basic-addon3.1">$</span>
													<input type="text" class="form-control" id="alighaddon3" placeholder="Amount">
													<span class="input-group-addon" id="basic-addon3.2">.00</span>
												</div>
											</div>
										</div>

										/* For Left Icon Alignment */

										<div class="form-group row">
											<div class="col-md-2">
												<label for="iconaddon1" class="col-form-label">Icon</label>
											</div>
											<div class="col-md-10">
												<div class="input-group">
													<span class="input-group-addon">
														<i class="icofont icofont-email"></i>
													</span>
													<input type="email" class="form-control" id="iconaddon1" placeholder="Email">
												</div>
											</div>
										</div>

										/* For Right Icon Alignment */

										<div class="form-group row">
											<div class="col-md-2">
												<label class="sr-only">Icon addon</label>
											</div>
											<div class="col-md-10">
												<div class="input-group">
													<input type="text" id="iconaddon12" class="form-control" placeholder="Username">
													<span class="input-group-addon">
														<i class="icofont icofont-ui-user"></i>
													</span>
												</div>
											</div>
										</div>

										/* For Group Icon Alignment */

										<div class="form-group row">
											<div class="col-md-2">
												<label for="iconaddon3" class="sr-only">Icon addon</label>
											</div>
											<div class="col-md-10">
												<div class="input-group">
													<span class="input-group-addon" id="icon-addon3.1">
														<i class="icofont icofont-thumbs-up"></i>
													</span>
													<input type="text" id="iconaddon3" class="form-control" placeholder="Details" aria-describedby="icon-addon3.1">
													<span class="input-group-addon" id="icon-addon3.2">
														<i class="icofont icofont-thumbs-down"></i>
													</span>
												</div>
											</div>
										</div>

										/* For Left Side Dropdown */

										<div class="form-group row">
											<div class="col-md-2">
												<label class="col-form-label">Dropdown</label>
											</div>
											<div class="col-md-10">
												<div class="input-group" id="dropdown1">
													<div class="input-group-btn">
														<button type="button" class="btn btn-danger addon-btn waves-effect waves-light dropdown-toggle addon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
															Action
														</button>
														<div class="dropdown-menu">
															<a class="dropdown-item" href="#">Action</a>
															<a class="dropdown-item" href="#">Another action</a>
															<a class="dropdown-item" href="#">Something else here</a>
															<div role="separator" class="dropdown-divider"></div>
															<a class="dropdown-item" href="#">Separated link</a>
														</div>
													</div>
													<input type="text" class="form-control" placeholder="Username">
												</div>
											</div>
										</div>

										/* For Right Side Dropdown */

										<div class="form-group row">
											<div class="col-md-2">
												<label class="sr-only">Dropdown</label>
											</div>
											<div class="col-md-10">
												<div class="input-group" id="dropdown2">
													<input type="text" class="form-control" placeholder="Username">
													<div class="input-group-btn">
														<button type="button" class="btn btn-info addon-btn waves-effect waves-light dropdown-toggle addon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
															Action
														</button>
														<div class="dropdown-menu dropdown-menu-right">
															<a class="dropdown-item" href="#">Action</a>
															<a class="dropdown-item" href="#">Another action</a>
															<a class="dropdown-item" href="#">Something else here</a>
															<div role="separator" class="dropdown-divider"></div>
															<a class="dropdown-item" href="#">Separated link</a>
														</div>
													</div>
												</div>
											</div>
										</div>

										/* For Group Dropdown */

										<div class="form-group row">
											<div class="col-md-2">
												<label class="sr-only">Dropdown addon</label>
											</div>
											<div class="col-md-10">
												<div class="input-group" id="dropdown3">
													<div class="input-group-btn">
														<button type="button" class="btn btn-success addon-btn waves-effect waves-light dropdown-toggle addon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
															Action
														</button>
														<div class="dropdown-menu dropdown-menu-right">
															<a class="dropdown-item" href="#">Action</a>
															<a class="dropdown-item" href="#">Another action</a>
															<a class="dropdown-item" href="#">Something else here</a>
															<div role="separator" class="dropdown-divider"></div>
															<a class="dropdown-item" href="#">Separated link</a>
														</div>
													</div>
													<input type="text" class="form-control" placeholder="Username" >
													<div class="input-group-btn">
														<button type="button" class="btn btn-primary addon-btn waves-effect waves-light dropdown-toggle addon-btn" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">

														</button>
														<div class="dropdown-menu dropdown-menu-right">
															<a class="dropdown-item" href="#">Action</a>
															<a class="dropdown-item" href="#">Another action</a>
															<a class="dropdown-item" href="#">Something else here</a>
															<div role="separator" class="dropdown-divider"></div>
															<a class="dropdown-item" href="#">Separated link</a>
														</div>
													</div>
												</div>
											</div>
										</div>

										/* For Left Button */

										<div class="form-group row">
											<div class="col-md-2">
												<label for="btnaddon1" class="col-form-label">Button</label>
											</div>
											<div class="col-md-10">
												<div class="input-group">
													<span class="input-group-btn" id="btn-addon1">
														<button type="submit" class="btn btn-info addon-btn waves-effect waves-light">
														Go!
														</button>
													</span>
												<input type="text" id="btnaddon1" class="form-control" placeholder="Username" aria-describedby="btn-addon1">
												</div>
											</div>
										</div>

										/* For Right Button */

										<div class="form-group row">
											<div class="col-md-2">
												<label for="btnaddon2" class="sr-only">Button addon</label>
											</div>
											<div class="col-md-10">
												<div class="input-group">
													<input id="btnaddon2" type="text" class="form-control" placeholder="Username" aria-describedby="btn-addon2">
														<span class="input-group-btn" id="btn-addon2">
															<button type="submit" class="btn btn-warning addon-btn waves-effect waves-light">
																Go!
															</button>
														</span>
												</div>
											</div>
										</div>

										/* For Group Button */

										<div class="form-group row">
											<div class="col-md-2">
												<label for="btnaddon3" class="sr-only">Button addon</label>
											</div>
											<div class="col-md-10">
												<div class="input-group">
													<span class="input-group-btn" id="btn-addon3.1">
														<button type="submit" class="btn btn-primary addon-btn waves-effect waves-light">
														Search!
														</button>
													</span>
														<input id="btnaddon3" type="text" class="form-control" placeholder="Username" aria-describedby="btn-addon3.1">
															<span class="input-group-btn" id="btn-addon3.2">
																<button type="submit" class="btn btn-success addon-btn waves-effect waves-light">
																Go!
																</button>
															</span>
												</div>
											</div>
										</div>