Currently, I am in the process of creating a form and have encountered an issue. Specifically, I am attempting to center a row both horizontally and vertically within the layout but also need the text in the first column to be right-aligned. This first column contains labels that must appear on the left side of the input fields. Below is the snippet of code I am working with:
<div class="container">
<div class="row justify-content-center align-items-center">
<div class="col-md-3 text-right">
<label for="numberOfPeople">Number of people</label>
</div>
<div class="col-md-7">
<div class="p-inputgroup">
<p-inputNumber inputId="numberOfPeople" [(ngModel)]="numberOfPeople"> </p-inputNumber>
</div>
</div>
</div>
</div>
The main issue lies in the fact that the text within the first column remains centered despite my efforts. I have attempted adding the .text-right class directly to the label, as well as replacing the label with a p tag, however, these attempts have not yielded the desired result. While I would like to leverage Bootstrap's semantic classes to address this problem, it has been quite some time since I last worked with Bootstrap and I find myself struggling to achieve the intended outcome. Any suggestions or ideas on how to resolve this?