Controls fill their container, so a plain form stacks; separate fields with .mb-3. For columns use the grid (Grid Layout), as the next subsection does. For a horizontal form, make each field a .row and add .col-form-label, which gives the label a control's vertical padding so the texts line up. An inline form is a .row .row-cols-lg-auto .align-items-center.
<link rel=stylesheet href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
<form class="p-3">
<div class="row mb-2"><label for="hName" class="col-3 col-form-label">Full name</label>
<div class="col-9"><input class="form-control" id="hName"></div></div>
<div class="row"><label for="role" class="col-3 col-form-label">Role</label>
<div class="col-9"><select class="form-select" id="role"><option>Admin</option></select></div>
</div>
</form>
Use .col-sm-3 instead of .col-3 to let the form stack on phones.