diff options
Diffstat (limited to 'docs/components/forms.md')
| -rw-r--r-- | docs/components/forms.md | 38 |
1 files changed, 33 insertions, 5 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index 743f2b8ba..66d34df2f 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -240,29 +240,57 @@ Because of this, you may need to manually adddres the width and alignment of ind ### Using the Grid -For more structured form layouts, you can utilize Bootstrap's predefined grid classes (or mixins). 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, you can utilize Bootstrap's predefined grid classes (or mixins). Add the `.row` class to form groups and use the `.col-*` classes to specify the width of your labels and controls. To vertically center the labels with the textual inputs—nearly anything with `.form-control`—use the `.form-control-label` class. {% example html %} <form> <div class="form-group row"> - <label for="inputEmail3" class="col-sm-2 control-label">Email</label> + <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 class="form-group row"> - <label for="inputPassword3" class="col-sm-2 control-label">Password</label> + <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 class="form-group row"> - <div class="col-sm-offset-2 col-sm-10"> + <label class="col-sm-2" for="">Radios</label> + <div class="col-sm-10"> + <div class="radio"> + <label> + <input type="radio" name="optionsRadios" id="optionsRadios1" 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="optionsRadios" id="optionsRadios2" 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="optionsRadios" id="optionsRadios3" value="option3" disabled> + Option three is disabled + </label> + </div> + </div> + </div> + <div class="form-group row"> + <label class="col-sm-2" for="">Checkbox</label> + <div class="col-sm-10"> <div class="checkbox"> <label> - <input type="checkbox"> Remember me + <input type="checkbox"> Check me out </label> </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> </div> |