How to vertically align buttons in form-row class in bootstrap 4

Question

I have not been able to keep a form-row set of buttons in line when associating labels with buttons. The behavior of a button assigned to a column width, such as col-3 is different than the behavior of a button assigned with an automatic width, col-auto.

The goal is to have all buttons vertically aligned with a text label above the button. The text label should follow the button's position as the viewport size changes. I've tried using.align-self-baseline which does not seem to have an effect.

If I add a blank label above the button with an autosized column it places the text to the left of the button instead of above it. The labels need to appear above the buttons as the target application is displaying on a mobile device with limited display port width. Here are snippets of both:

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <div class="container"> <form action="#"> <div class="form-row"> <div class="col-4 text-center"> <label>Desired</label> <button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button> </div> <div class="col-auto text-center"> <label>undesired</label> <button type="submit" class="btn btn-sm btn-outline-primary active" aria-pressed="true">Button 2</button> </div> </div> <!-- row --> <div class="form-row mt-4"> <div class="col-4 text-center"> <label>Desired</label> <button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Row 2 Button</button> </div> <div class="col-auto text-center"> <button type="submit" class="btn btn-sm btn-outline-primary align-self-baseline active" aria-pressed="true">Not aligned with Row 2 Button</button> </div> </div> <!-- row --> </form> </div>

Answer 1

The key is in the btn-block class - it gives display:block property to the buttons inside the div with col-4 class - if you remove it, the alignment will be similar

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"> <div class="container"> <form action="#"> <div class="form-row"> <div class="col-4 text-center"> <label>Desired</label> <button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true">Button Name</button> </div> <div class="col-auto text-center"> <label>undesired</label> <button type="submit" class="btn btn-sm btn-block btn-outline-primary active" aria-pressed="true">Button 2</button> </div> </div> <!-- row --> <div class="form-row mt-4"> <div class="col-4 text-center"> <label>Desired</label> <button type="submit" class="btn btn-sm btn-outline-primary btn-block active btn-block" aria-pressed="true">Row 2 Button</button> </div> <div class="col-auto text-center d-flex"> <button type="submit" class="btn btn-sm btn-outline-primary align-self-end active" aria-pressed="true">Not aligned with Row 2 Button</button> </div> </div> <!-- row --> </form> </div>