Notes:

Bootstrap - Form related classes:
We understand how to create forms in Bootstrap

form-control: is used to convert textual input controls into block level controls
form-group: is used to group related labels and controls together

form-check-input: is used to stylize radio and checkboxes
form-check-label: is used to stylize associated labels of checkboxes & radio buttons
form-check: is used to group related labels & checkboxes or related labels & radio buttons

form-control-file: is used to stylize file controls

form-row or row: is used create rows inside a form
col: is used to create columns inside a row

needs-validation: used to validate the form
valid-feedback: used to display message on valid data entry
invalid-feedback: used to display message on invalid data entry

Complete Form Code:
<form action="default2.html" class="border needs-validation"
style="min-height:100px; border:1px solid gray; width:40%; margin:auto;padding:10px;" novalidate>

<div class="form-group form-row">

<div class="form-group col">
<label for="txtUserName">User Name:</label>
<input type="text" value="" name="txtUserName" id="txtUserName" class="form-control" required/>
<span class="valid-feedback">Valid</span>
<span class="invalid-feedback">Invalid: Please enter your name</span>
</div>

<div class="form-group col">
<label for="txtPassword">Password:</label>
<input type="password" value="" name="txtPassword" id="txtPassword" class="form-control" required/>
<span class="valid-feedback">Valid</span>
<span class="invalid-feedback">Invalid: Please enter password</span>
</div>

</div>

<div class="form-group">
<label for="emailUser">Email ID:</label>
<input type="email" value="" name="emailUser" id="emailUser" class="form-control"/>
</div>

<div class="form-group form-row">

<div class="form-group col">
<label for="rdbGender">Gender:</label>
<div class="form-check">
<input type="radio" value="m" name="rdbGender" id="rdbMale" class="form-check-input" checked/>
<label for="rdbMale" class="form-check-label">Male</label>
</div>
<div class="form-check">
<input type="radio" value="f" name="rdbGender" id="rdbFemale" class="form-check-input"/>
<label for=""rdbFemale" class="form-check-label">Female</label>
</div>
</div>

<div class="form-group col">
<label for="chkHobbies">Hobbies:</label>
<div class="form-check">
<input type="checkbox" value="m" name="chkHobbies" id="chkMusic" class="form-check-input" checked/>
<label for="chkMusic" class="form-check-label">Music</label>
</div>
<div class="form-check">
<input type="checkbox" value="d" name="chkHobbies" id="chkDrawing" class="form-check-input"/>
<label for="chkDrawing" class="form-check-label">Drawing</label>
</div>
</div>
</div>

<div class="form-group">
<label for="slctQulification">Qualification:</label>
<select name="slctQulification" id="slctQulification" class="form-control">
<option value="s">SSLC</option>
<option value="u">UG</option>
<option value="p">PG</option>
</select>
</div>

<div class="form-group">
<label for="txtaAddress">Address:</label>
<textarea name="txtaAddress" id="txtaAddress" class="form-control"></textarea>
</div>

<div class="form-group form-row">
<div class="form-group col">
<input type="submit" value="SUBMIT" class="btn btn-dark btn-block"/>
</div>
<div class="form-group col">
<input type="reset" value="RESET" class="btn btn-dark btn-block"/>
</div>
</div>

</form>

<script type="text/javascript">
// Disable form submissions if there are invalid fields
(function() {
'use strict';
window.addEventListener('load', function() {
// Get the forms we want to add validation styles to
var forms = document.getElementsByClassName('needs-validation');
// Loop over them and prevent submission
var validation = Array.prototype.filter.call(forms, function(form) {
form.addEventListener('submit', function(event) {
if (form.checkValidity() === false) {
event.preventDefault();
event.stopPropagation();
}
form.classList.add('was-validated');
}, false);
});
}, false);
})();
</script>

Interview Questions: