Bootstrap bottom align button inside .form-group

Question

I have markup as follows which shows 3 text inputs on a horizontal line

<div class="form-inline">
    <div class="form-group">
        <label>Field 1</label>
        <input id="f1">    
    </div>

    <div class="form-group">
        <label>Field 2</label> 
        <input id="f2">
    </div>

    <div class="form-group">
        <label>Field 3</label>
        <input id="f3">
    </div>
</div>

This works fine but I want a button to the right of "Field 3" which is horizontally aligned with the bottom of the input, #f3.

I've looked at the following but none of these seem to work:

• https://v4-alpha.getbootstrap.com/utilities/vertical-align/
• bootstrap-3 align links and buttons at the bottom of a div
• How do I align the button to the bottom of the row/column in bootstrap?

The markup which I've tried adds the button in a 4th .form-group and then I've tried various things on the links above, such as adding .align-bottom to the relevant div.

<div class="form-inline">
    <div class="form-group">
        <label>Field 1</label>
        <input id="f1">    
    </div>

    <div class="form-group">
        <label>Field 2</label> 
        <input id="f2">
    </div>

    <div class="form-group">
        <label>Field 3</label>
        <input id="f3">
    </div>

    <div class="form-group align-bottom">
        <input type="reset" value="Reset" class="align-bottom">
    </div>
</div>

Surely someone wanting the button to be aligned with the bottom of the form elements - in a nice straight line - is a common scenario. So what am I doing wrong and how can I achieve this seemingly simple task?

Answer 1

This may work. In .form-inline, form-group classes are aligned to the middle, just simply align it to the bottom.

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<style>
label{
  display:block;
}
.form-inline .form-group {
  vertical-align:bottom;
}
</style>
<div class="form-inline">
  <div class="form-group">
    <label>Field 1</label>
    <input id="f1">
  </div>

  <div class="form-group">
    <label>Field 2</label>
    <input id="f2">
  </div>

  <div class="form-group">
    <label>Field 3</label>
    <input id="f3">
  </div>

  <div class="form-group align-bottom">
    <input type="reset" value="Reset" class="align-bottom">
  </div>
</div>