title: How to vertically align buttons in form-row class in bootstrap 4
body: <p>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.</p>
  <p>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.</p>
  <p>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:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code> &lt;link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous"&gt;
   
    &lt;div class="container"&gt;
      &lt;form action="#"&gt;
      
        &lt;div class="form-row"&gt;
          &lt;div class="col-4 text-center"&gt;
            &lt;label&gt;Desired&lt;/label&gt;
            &lt;button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true"&gt;Button Name&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="col-auto text-center"&gt;
            &lt;label&gt;undesired&lt;/label&gt;
            &lt;button type="submit" class="btn btn-sm btn-outline-primary active" aria-pressed="true"&gt;Button 2&lt;/button&gt;
          &lt;/div&gt;        
        &lt;/div&gt;  &lt;!-- row --&gt;
   
        &lt;div class="form-row mt-4"&gt;
          &lt;div class="col-4 text-center"&gt;
            &lt;label&gt;Desired&lt;/label&gt;
            &lt;button type="submit" class="btn btn-sm btn-outline-primary btn-block active" aria-pressed="true"&gt;Row 2 Button&lt;/button&gt;
          &lt;/div&gt;
  
          &lt;div class="col-auto text-center"&gt;
            &lt;button type="submit" class="btn btn-sm btn-outline-primary align-self-baseline active" aria-pressed="true"&gt;Not aligned with Row 2 Button&lt;/button&gt;
          &lt;/div&gt;        
        &lt;/div&gt;  &lt;!-- row --&gt;
   
      &lt;/form&gt;
    &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>