css - Cannot get Bootstrap 4 Horizontal Form to work as required

Question

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>

Answer 1

The problem is that Flexbox doesn't work in rows/columns the way a Table does. You can use col-sm-auto to get each label to shrink-to-fit, but then the labels/inputs won't align vertically down the page...

It sounds like you want to shrink the label column to fit the width of the widest label. This could be done by putting all the labels in 1 column, and inputs in another column, but then each label/input won't stack together on mobile screens.

There's no elegant Bootstrap-only solution to this problem. You can use Tables, CSS grid, or the option described by @Toan Lu in the comments.

Bootstrap Grid option

I'd recommend simply using col-sm-2 or col-sm-3 for the labels (fitting them to approx. the widest label) and text-truncate to ellipsis(...) the overflowing text until they stack vertically on mobile...

<div class="form-row">
        <label class="col-form-label col-sm-2 text-truncate">
            Label
        </label>
        <div class="col-sm-3 col-md-2">
             <select>..</select>
        </div>
</div>

https://codeply.com/go/e3mDrmMv7k

---

Table option

With this option, the width:1% is used on the labels so that they shrink to the width of the widest. Use text-nowrap to stop the labels from wrapping. Each form row is a d-table-row and each label is a d-table-cell...

.col-form-label.d-sm-table-cell {
   width: 1%;
}
<div class="container py-3">
    <div class="form-row d-table-row">
        <label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
            Genre
        </label>
        <div class="col-sm-3 col-md-2">
            <select>
             ..
            </select>
        </div>
    </div>
    <div class="form-row d-table-row">
        <label class="col-form-label col-sm-2 d-sm-table-cell text-nowrap">
            Longer label here
        </label>
        <div class="col-sm-3 col-md-2">
            <select>
                ..
            </select>
        </div>
    </div>
</div>

https://codeply.com/go/e3mDrmMv7k (see 2nd option)

The table option makes the divs into tr/td but also works responsively allowing the fields to stack vertically on mobile. Read more on [d-table classes](Yes, part of Bootstrap 4: http://getbootstrap.com/docs/4.1/utilities/display/#notation).

---

CSS Grid option

One other (non-Bootstrap 4) method is using CSS grid. Make the row display:grid Use the fr sizing on the 2 grid-template-columns across the row.

.d-grid {
  display: grid;
  grid-template-columns: 0fr 1fr;
}

https://codeply.com/go/9Z7Hg2tl1H