Unclear docs: v3-v4 migration of horizontal forms, .col-form-label vs. .form-control-label
Created by: Herst
The example code for a horizontal form in v3:
<form class="form-horizontal">
<div class="form-group">
<label for="inputEmail3" class="col-sm-2 control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
[…]
</form>
Let's say we wanted to port it to v4. The relevant parts from the migration document:
- Renamed
.control-label
to.form-control-label
. […]- Horizontal forms overhauled:
- Dropped the
.form-horizontal
class requirement..form-group
no longer applies styles from the.row
via mixin, so.row
is now required for horizontal grid layouts (e.g.,<div class="form-group row">
).- Added new
.form-control-label
class to vertically center labels with.form-control
s.- Added new
.form-row
for compact form layouts with the grid classes (swap your.row
for a.form-row
and go).
(Highlight by me.)
OK, so the code would turn into:
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 form-control-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
[…]
</form>
But if we were to look at the v4 example code for horizontal forms we see that it's different:
<div class="container">
<form>
<div class="form-group row">
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
<div class="col-sm-10">
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
</div>
</div>
[…]
</form>
</div>
There are two discrepancies:
-
.container
around it, I think this one can be ignored, it's obvious that it's just for style. -
.col-form-label
for the label instead of.form-control-label
. Former is never mentioned in the migration doc and latter is not mentioned in the forms documentation, so what is it now?