The horizontal form isn't aligning the labels and fields horizontally.
On my page, I have a form with 4 fields, a submit button, and a list at the bottom. The form is enclosed in a <p-panel > and the list is enclosed in another <p-panel >.
I want the form to be aligned like a bootstrap horizontal form. The version of my Bootstrap.min.css is Bootstrap v4.5.0.
Here is the code:
<p-messages [(value)]="msgs"></p-messages>
<p-panel >
<p-header>
Header Example
</p-header>
<form [formGroup]="testForm" (ngSubmit)="submitForm(testForm.value)" class="form-horizontal">
<div class="form-group" *ngIf="!this.isTest" style="padding:10px;">
<label class="control-label col-sm-2">Name:</label>
<div class="col-sm-10">
{{this.name}}
</div>
</div>
...I am seeking for assistance on achieving bootstrap horizontal alignment as demonstrated on this page.
However, the rendered result in Chrome displays labels on top of inputs instead of beside them, like this:
Name:
ABCTEST
In IE, the layout also appears one below the other with the label on top followed by input/button/date/text area vertically positioned. I'm unsure what is incorrect in my code.
I have referenced Bootstrap in my angular.json file under "src/assets/css/bootstrap.min.css". When inspecting elements in Chrome, it points to the bootstrap.min.css file.
Your insights would be greatly appreciated.