I'm encountering an issue with my Angular app that uses Bootstrap 4. I'm trying to have my form label and input text box appear on the same line, but instead, they are displaying on separate lines. I've tried searching for a solution, but haven't found a satisfactory answer yet.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
<div class="col-md-12">
<form class="form-horizontal" [formGroup]="parentCategoryForm" autoComplete="off">
<div class="form-group">
<label class="control-label col-md-2" for="parent">Category name</label>
<div class="col-md-10">
<input type="text" formControlName="parentName" name="parentName" class="form-control" id="parentName" />
</div>
</div>
<div class="btn-toolbar pull-right">
<button type="button" (click)="cancel()" class="btn btn-outline-danger btn-sm mr-4">Cancel</button>
<button type="submit" class="btn btn-outline-primary btn-sm">Submit</button>
</div>
</form>
</div>
</div>I've been following tutorials on Creating Horizontal Form Layout from this site. Any idea where I might be going wrong?