I'm just starting to learn about bootstrap forms. I've noticed that the UI looks different when the input is nested inside a label. Can someone shed some light on this for me?
Below is the code snippet:
<form [formGroup]="loginForm" (ngSubmit)="onSubmit()">
<div class="form-group">
<label>userName:
<input class="form-control col-sm-5" formControlName="userName" type="text">
</label>
</div>
<div class="form-group">
<label>userName:</label>
<input class="form-control col-sm-5" formControlName="userName" type="text">
</div>
</form>
https://i.sstatic.net/3zwUn.png
The image shows how my page is rendered differently. My question is, why does the input element appear shorter in the first row and longer in the second row?