I'm facing an issue where I cannot get a set of buttons in line with labels when using different column widths in Bootstrap. The behavior of a button assigned to a specific column width, like col-3, is not the same as a button assigned with automatic width, col-auto.
The objective is to have all buttons aligned vertically with a text label positioned above each button. This alignment should remain consistent even as the viewport size changes. I've tried using .align-self-baseline but it hasn't worked as expected.
When I add a blank label above the button with an autosized column, the text appears next to the button instead of above it. However, for the target mobile application with limited display width, the labels must be placed above the buttons. Here are snippets of the code:
<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>