I recently encountered an issue on my Bootstrap 4 page where adding help text to a single input control resulted in it appearing on the same line, rather than directly beneath the control as expected.
Upon investigating, I believe the problem lies within the input-group/form-group elements. However, I am struggling to understand how these components interact, especially since I am using input groups as the field label.
Here is a snippet of the HTML code:
<div class="input-group">
<div class="input-group-prepend">
<label for="undoLocation" id="undoLocationlabel" class="input-group-text">
Find songs
</label>
</div>
<select class="custom-select" name="undoLocation" id="undoLocation" aria-describedby="undoLocationHELP">
<option value="0">
that are currently in the selected locations
</option>
<option selected="selected" value="1">
that were originally in the selected locations
</option>
</select>
<small id="undoLocationHELP" class="form-text text-muted">
When files have been moved by SongKong you can use this option to find files currently in the selected all location or find files that were originally in the selected location
</small>
</div>
I have also created a jsfiddle to demonstrate the issue: https://jsfiddle.net/paultaylor/g64v96fy/1/