How can I align a horizontal form with the submit button using Bootstrap 4?

Question

I am currently working on making a horizontal form with a couple of selects, but I can't get the button to be in line with the dropdown instead of the text.

This is how my code looks like:

<form method="get" action="/some-action" >
<div class="container-fluid">
    <div class="form-group row">
        <div class="col">
            <label for="something">Something</label>
            <select class="form-control" id="something" name="something">
                <option>1</option>
                <option>2</option>
                <option>3</option>
            </select>
        </div>
        <div class="col">
            <input type="submit" class="btn btn-primary"></button>
         </div>
    </div>
</div>
</form>

I already tried using an empty "cell" to force the grid control to move the button down, the problem is that it went too down, I haven't found a way to get it perfectly aligned.

Answer 1

I'd probably try some flexbox stuff: d-flex align-items-end

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">

<form method="get" action="/some-action">
  <div class="container-fluid">
    <div class="form-group row d-flex align-items-end">
      <div class="col">
        <label for="something">Something</label>
        <select class="form-control" id="something" name="something">
          <option>1</option>
          <option>2</option>
          <option>3</option>
        </select>
      </div>
      
      <div class="col">
        <input type="submit" class="btn btn-primary" />
      </div>
    </div>
  </div>
</form>

If you want to make that first column expand to fill, see How to use Bootstrap 4 flexbox to fill available content?.