Show label inline on a select field in Bootstrap 4

Question

I am trying to add an inline label to a select form input on Bootstrap 4. I copied the solution from the stackoverflow answer for Bootstrap 3 (available here), but it's not working (my code is below). I also tried adding "form-inline" to the main form tag (though I'd prefer a solution that does not require that), but even that didn't work. I also tried putting various sections of the below code in rows and columns, none of which worked. Any suggestions?

<div class="row mt-2">
    <div class="form-group">

      <label for="from_year"><small><strong>Search from year:</strong></small></label>
      <select name="from_year" class="form-control form-control-sm" id="from_year">
        <option value="1980">1980 (default)</option>
        {% for year in from_years %}

        <option value="{{ year }}">{{ year }}</option>

        {% endfor %}
      </select>
    </div>
  </div>

Answer 1

Sandra's answer above worked. I just had to try many permutations of divs/rows/cols, etc before it did. To save time for any future developers who encounter the same problem, here is what worked for me: I had to put the labels and the select in separate divs, all within one d-inline-flex div.

<div class="d-inline-flex mt-2">

      <div class="mr-2">
        <label for="from_year"><small><strong>Search from year:</strong></small></label>
      </div>
      <div>
        <select name="from_year" class="form-control form-control-sm" id="from_year">
          <option value="1980">1980 (default)</option>
          {% for year in from_years %}

          <option value="{{ year }}">{{ year }}</option>

          {% endfor %}
        </select>
      </div>
  </div>

Answer 2

See the V4 docs under Utilities. They have a built in d-inline or d-inline-block class that can be applied to your select element, or you can just wrap it in span which will also inline the element, but it's a bit sloppy!

<div class="container">
    <div class="row mt-2">
        <div class="form-group">

            <label class="d-inline-block" for="from_year"><small><strong>Search from year:</strong></small></label>

            <select name="from_year" class="form-control form-control-sm d-inline-block" style="width: auto;" id="from_year">
                <option value="1980">1980 (default)</option>
                {% for year in from_years %}

                <option value="{{ year }}">{{ year }}</option>

                {% endfor %}
            </select>

        </div>
    </div>
</div>