Reputation: 13160
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>
Upvotes: 14
Views: 3399
Reputation: 362880
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
Upvotes: 11
Reputation: 1
Works as expected if you use earlier version of bootstrap css:
<link href="https://stackpath.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css">
Upvotes: -1