How do I make a simple Bootstrap Horizontal Form that looks correct on phone, tablet and computer. Namely I want the combos to be aligned as shown in the example, but I don't want the combos larger than necessary, and I only want a small gap between label and combo. Then when screen size is too small to fit in label and combo I want them stacked.
Specifically the Boostrap example use up the whole 100% width I dont want that, I don't want the combo to be wider then necessary and I dont want a big gap between the label and the combo.
I tried adding col-auto but then the combos no longer horizontally aligned with each other.
I have now tried adding col-[1-12] values for label and combo as described in https://getbootstrap.com/docs/4.1/components/forms/#column-sizing but then it didnt stack correctly when goes to small phone.
I then tried using col-md so the totals less than 12 but it doesn't look right on main screen because now both the label and combo take the same space so they have half the screen each and are nowhere near each other.
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" type="text/css">
<div>
<div class="form-row">
<label for="discogsGenreOverwriteOption" id="discogsGenreOverwriteOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
Genre
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreOverwriteOptionhelp" class="custom-select" name="discogsGenreOverwriteOption" id="discogsGenreOverwriteOption">
<option value="0">
Always replace values
</option>
<option value="1">
Always add values
</option>
<option value="2">
Replace if empty
</option>
<option selected="selected" value="3">
Never Replace
</option>
</select>
</div>
</div>
<div class="form-row">
<label for="discogsGenreFromOption" id="discogsGenreFromOptionlabel" class="col-form-label col-xs-12 col-sm-6 col-md-5">
From
</label>
<div class="col-xs-12 col-sm-3 col-md-2">
<select aria-describedby="discogsGenreFromOptionhelp" class="custom-select" name="discogsGenreFromOption" id="discogsGenreFromOption">
<option value="0">
Discogs Style
</option>
<option value="1">
Discogs Genre
</option>
<option value="2">
Discogs Style and Genre
</option>
</select>
</div>
</div>
</div>
See Question&Answers more detail:os