Can't vertically center text inside b-form-group

Describe the bug

Having a form group which in some cases has plain text rather than a form-input. That text should be vertically centered:

 <b-form-group label-cols="4" label-cols-lg="2" label="Default" label-for="input-default">
    Password goes here
  </b-form-group>

With plain Bootstrap 4, it is possible by setting align-self-center for the parent node: https://stackoverflow.com/questions/58353571/bootstrap-4-vertical-center-text-inside-horizontal-form-row

but in bootstrap-vue markup above there’s no such node.

The generated markup has the node, and applying the align-self-center class in Inspector works:

<div class="col">Password goes here</div>

How to generate this markup?

<div class="col align-self-center">Password goes here</div>

Expected behavior

A way to apply a class to container node which holds the <b-form-group> content after the label.

Versions

2.0.4

Thanks!

[mariusa]

Thanks Troy!

Both solutions are good for the simplified request as posted. We need to display HTML, not just plain text though, and also a form control in same cases.

So I just went with a class applied on b-form-group:

.form-align-self-center {
  div {
    div {
      align-self: center !important;
    }
  }
}

Thanks for your support!

[mariusa]

Thanks so much!