diff --git a/docs/components/forms.md b/docs/components/forms.md index a7ce4062cf89096296b1f7798fa54cdfc1b83155..63dfd46b406fc46b4a92dc4a228f9bf0e41af050 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -332,65 +332,89 @@ Because of this, you may need to manually address the width and alignment of ind ### Using the Grid -For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls. +For more structured form layouts that are also responsive, you can utilize Bootstrap's [predefined grid classes](/layout/grid/#predefined-classes) or [mixins](/layout/grid/#sass-mixins) to create horizontal forms. Add the `.row` class to form groups and use the `.col-*-*` classes to specify the width of your labels and controls. Be sure to add `.form-control-label` to your `<label>`s as well so they're vertically centered with their associated labels. {% example html %} -<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 class="container"> + <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> - </div> - <div class="form-group row"> - <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label> - <div class="col-sm-10"> - <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> + <div class="form-group row"> + <label for="inputPassword3" class="col-sm-2 form-control-label">Password</label> + <div class="col-sm-10"> + <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> + </div> </div> - </div> - <div class="form-group row"> - <label class="col-sm-2">Radios</label> - <div class="col-sm-10"> - <div class="radio"> - <label> - <input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> - Option one is this and that—be sure to include why it's great - </label> + <div class="form-group row"> + <label class="col-sm-2">Radios</label> + <div class="col-sm-10"> + <div class="radio"> + <label> + <input type="radio" name="gridRadios" id="gridRadios1" value="option1" checked> + Option one is this and that—be sure to include why it's great + </label> + </div> + <div class="radio"> + <label> + <input type="radio" name="gridRadios" id="gridRadios2" value="option2"> + Option two can be something else and selecting it will deselect option one + </label> + </div> + <div class="radio disabled"> + <label> + <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> + Option three is disabled + </label> + </div> </div> - <div class="radio"> - <label> - <input type="radio" name="gridRadios" id="gridRadios2" value="option2"> - Option two can be something else and selecting it will deselect option one - </label> + </div> + <div class="form-group row"> + <label class="col-sm-2">Checkbox</label> + <div class="col-sm-10"> + <div class="checkbox"> + <label> + <input type="checkbox"> Check me out + </label> + </div> </div> - <div class="radio disabled"> - <label> - <input type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> - Option three is disabled - </label> + </div> + <div class="form-group row"> + <div class="col-sm-offset-2 col-sm-10"> + <button type="submit" class="btn btn-secondary">Sign in</button> </div> </div> - </div> - <div class="form-group row"> - <label class="col-sm-2">Checkbox</label> - <div class="col-sm-10"> - <div class="checkbox"> - <label> - <input type="checkbox"> Check me out - </label> + </form> +</div> +{% endexample %} + +Grid-based form layouts also support large and small inputs. + +{% example html %} +<div class="container"> + <form> + <div class="form-group row"> + <label for="lgFormGroupInput" class="col-sm-2 form-control-label form-control-label-lg">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control form-control-lg" id="lgFormGroupInput" placeholder="you@example.com"> </div> </div> - </div> - <div class="form-group row"> - <div class="col-sm-offset-2 col-sm-10"> - <button type="submit" class="btn btn-secondary">Sign in</button> + <div class="form-group row"> + <label for="smFormGroupInput" class="col-sm-2 form-control-label form-control-label-sm">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control form-control-sm" id="smFormGroupInput" placeholder="you@example.com"> + </div> </div> - </div> -</form> + </form> +</div> {% endexample %} + ## Checkboxes and radios Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many.