Skip to content

Commit 008e0b5

Browse files
andresgalantemdo
andresgalante
authored and
mdo
committed
Improves forms migration guide, docs, and scss (twbs#24348)
* fixes migration forms guides * removes container from Horizontal form * adds col-form-label sizes on form docs * removes .form-control-label from forms.scss * add note to migration
1 parent 217d344 commit 008e0b5

3 files changed

Lines changed: 73 additions & 52 deletions

File tree

‎docs/4.0/components/forms.md‎

Lines changed: 70 additions & 45 deletions
Original file line numberDiff line numberDiff line change
@@ -365,62 +365,87 @@ Create horizontal forms with the grid by adding the `.row` class to form groups
365365
Be sure to add `.col-form-label` to your `<label>`s as well so they're vertically centered with their associated form controls. For `<legend>` elements, you can use `.col-form-legend` to make them appear similar to regular `<label>` elements.
366366

367367
{% example html %}
368-
<div class="container">
369-
<form>
370-
<div class="form-group row">
371-
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
372-
<div class="col-sm-10">
373-
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
374-
</div>
368+
<form>
369+
<div class="form-group row">
370+
<label for="inputEmail3" class="col-sm-2 col-form-label">Email</label>
371+
<div class="col-sm-10">
372+
<input type="email" class="form-control" id="inputEmail3" placeholder="Email">
375373
</div>
376-
<div class="form-group row">
377-
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
378-
<div class="col-sm-10">
379-
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
380-
</div>
374+
</div>
375+
<div class="form-group row">
376+
<label for="inputPassword3" class="col-sm-2 col-form-label">Password</label>
377+
<div class="col-sm-10">
378+
<input type="password" class="form-control" id="inputPassword3" placeholder="Password">
381379
</div>
382-
<fieldset class="form-group">
383-
<div class="row">
384-
<legend class="col-form-legend col-sm-2">Radios</legend>
385-
<div class="col-sm-10">
386-
<div class="form-check">
387-
<label class="form-check-label">
388-
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
389-
Option one is this and that&mdash;be sure to include why it's great
390-
</label>
391-
</div>
392-
<div class="form-check">
393-
<label class="form-check-label">
394-
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
395-
Option two can be something else and selecting it will deselect option one
396-
</label>
397-
</div>
398-
<div class="form-check disabled">
399-
<label class="form-check-label">
400-
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
401-
Option three is disabled
402-
</label>
403-
</div>
404-
</div>
405-
</div>
406-
</fieldset>
407-
<div class="form-group row">
408-
<div class="col-sm-2">Checkbox</div>
380+
</div>
381+
<fieldset class="form-group">
382+
<div class="row">
383+
<legend class="col-form-legend col-sm-2">Radios</legend>
409384
<div class="col-sm-10">
410385
<div class="form-check">
411386
<label class="form-check-label">
412-
<input class="form-check-input" type="checkbox"> Check me out
387+
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios1" value="option1" checked>
388+
Option one is this and that&mdash;be sure to include why it's great
389+
</label>
390+
</div>
391+
<div class="form-check">
392+
<label class="form-check-label">
393+
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios2" value="option2">
394+
Option two can be something else and selecting it will deselect option one
395+
</label>
396+
</div>
397+
<div class="form-check disabled">
398+
<label class="form-check-label">
399+
<input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled>
400+
Option three is disabled
413401
</label>
414402
</div>
415403
</div>
416404
</div>
417-
<div class="form-group row">
418-
<div class="col-sm-10">
419-
<button type="submit" class="btn btn-primary">Sign in</button>
405+
</fieldset>
406+
<div class="form-group row">
407+
<div class="col-sm-2">Checkbox</div>
408+
<div class="col-sm-10">
409+
<div class="form-check">
410+
<label class="form-check-label">
411+
<input class="form-check-input" type="checkbox"> Check me out
412+
</label>
420413
</div>
421414
</div>
422-
</form>
423-
</div>
415+
</div>
416+
<div class="form-group row">
417+
<div class="col-sm-10">
418+
<button type="submit" class="btn btn-primary">Sign in</button>
419+
</div>
420+
</div>
421+
</form>
422+
{% endexample %}
423+
424+
##### Horizontal form label sizing
425+
426+
Be sure to use `.col-form-label-sm` or `.col-form-label-lg` to your `<label>`s to correctly follow the size of `.form-control-lg` and `.form-control-sm`.
427+
428+
{% example html %}
429+
<form>
430+
<div class="form-group row">
431+
<label for="colFormLabelSm" class="col-sm-2 col-form-label col-form-label-sm">Email</label>
432+
<div class="col-sm-10">
433+
<input type="email" class="form-control form-control-sm" id="colFormLabelSm" placeholder="col-form-label-sm">
434+
</div>
435+
</div>
436+
<div class="form-group row">
437+
<label for="colFormLabel" class="col-sm-2 col-form-label">Email</label>
438+
<div class="col-sm-10">
439+
<input type="email" class="form-control" id="colFormLabel" placeholder="col-form-label">
440+
</div>
441+
</div>
442+
<div class="form-group row">
443+
<label for="colFormLabelLg" class="col-sm-2 col-form-label col-form-label-lg">Email</label>
444+
<div class="col-sm-10">
445+
<input type="email" class="form-control form-control-lg" id="colFormLabelLg" placeholder="col-form-label-lg">
446+
</div>
447+
</div>
448+
</form>
424449
{% endexample %}
425450

426451
#### Column sizing

‎docs/4.0/migration.md‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ While in beta, we aim to have no breaking changes. However, things don't always
1818
- Responsive tables now generate classes for each grid breakpoint. This breaks from Beta 1 in that the `.table-responsive` you've been using is more like `.table-responsive-md`. You may now use `.table-responsive` or `.table-responsive-{sm,md,lg,xl}` as needed.
1919
- Dropped Bower support as the package manager has been deprecated for alternatives (e.g., Yarn or npm). [See bower/bower#2298](https://github.com/bower/bower/issues/2298) for details.
2020
- Bootstrap now requires jQuery 3.0.0 or higher.
21+
- Removed the unused `.form-control-label` class. If you did make use of this class, it was duplicate of the `.col-form-label` class that vertically centered a `<label>` with it's associated input in horizontal form layouts.
2122
- Changed the `color-yiq` from a mixin that included the `color` property to a function that returns a value, allowing you to use it for any CSS property. For example, instead of `color-yiq(#000)`, you'd write `color: color-yiq(#000);`.
2223

2324
### Highlights
@@ -110,7 +111,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version
110111
### Forms
111112

112113
- Moved element resets to the `_reboot.scss` file.
113-
- Renamed `.control-label` to `.form-control-label`.
114+
- Renamed `.control-label` to `.col-form-label`.
114115
- Renamed `.input-lg` and `.input-sm` to `.form-control-lg` and `.form-control-sm`, respectively.
115116
- Dropped `.form-group-*` classes for simplicity's sake. Use `.form-control-*` classes instead now.
116117
- Dropped `.help-block` and replaced it with `.form-text` for block-level help text. For inline help text and other flexible options, use utility classes like `.text-muted`.
@@ -119,7 +120,7 @@ New to Bootstrap 4 is the [Reboot]({{ site.baseurl }}/docs/{{ site.docs_version
119120
- Horizontal forms overhauled:
120121
- Dropped the `.form-horizontal` class requirement.
121122
- `.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">`).
122-
- Added new `.form-control-label` class to vertically center labels with `.form-control`s.
123+
- Added new `.col-form-label` class to vertically center labels with `.form-control`s.
123124
- Added new `.form-row` for compact form layouts with the grid classes (swap your `.row` for a `.form-row` and go).
124125
- Added custom forms support (for checkboxes, radios, selects, and file inputs).
125126
- Replaced `.has-error`, `.has-warning`, and `.has-success` classes with HTML5 form validation via CSS's `:invalid` and `:valid` pseudo-classes.

‎scss/_forms.scss‎

Lines changed: 0 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -316,11 +316,6 @@ select.form-control-lg {
316316
width: auto;
317317
}
318318

319-
.form-control-label {
320-
margin-bottom: 0;
321-
vertical-align: middle;
322-
}
323-
324319
// Remove default margin on radios/checkboxes that were used for stacking, and
325320
// then undo the floating of radios and checkboxes to match.
326321
.form-check {

0 commit comments

Comments
 (0)