<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="[email protected]" 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 protected]</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>