diff options
Diffstat (limited to 'docs/components/forms.md')
| -rw-r--r-- | docs/components/forms.md | 96 |
1 files changed, 73 insertions, 23 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index 88740acfc..44cb1ed0d 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -350,26 +350,28 @@ Be sure to add `.col-form-label` to your `<label>`s as well so they're verticall <input type="password" class="form-control" id="inputPassword3" placeholder="Password"> </div> </div> - <fieldset class="form-group row"> - <legend class="col-form-legend col-sm-2">Radios</legend> - <div class="col-sm-10"> - <div class="form-check"> - <label class="form-check-label"> - <input class="form-check-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="form-check"> - <label class="form-check-label"> - <input class="form-check-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-check disabled"> - <label class="form-check-label"> - <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> - Option three is disabled - </label> + <fieldset class="form-group"> + <div class="row"> + <legend class="col-form-legend col-sm-2">Radios</legend> + <div class="col-sm-10"> + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-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="form-check"> + <label class="form-check-label"> + <input class="form-check-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-check disabled"> + <label class="form-check-label"> + <input class="form-check-input" type="radio" name="gridRadios" id="gridRadios3" value="option3" disabled> + Option three is disabled + </label> + </div> </div> </div> </fieldset> @@ -392,6 +394,55 @@ Be sure to add `.col-form-label` to your `<label>`s as well so they're verticall </div> {% endexample %} +More complex layouts can also be created with the grid system. + +{% example html %} +<div class="container"> + <form> + <div class="row"> + <div class="form-group col-md-6"> + <label for="inputEmail4" class="col-form-label">Email</label> + <input type="email" class="form-control" id="inputEmail4" placeholder="Email"> + </div> + <div class="form-group col-md-6"> + <label for="inputPassword4" class="col-form-label">Password</label> + <input type="password" class="form-control" id="inputPassword4" placeholder="Password"> + </div> + </div> + <div class="form-group"> + <label for="inputAddress" class="col-form-label">Address</label> + <input type="text" class="form-control" id="inputAddress" placeholder="1234 Main St"> + </div> + <div class="form-group"> + <label for="inputAddress2" class="col-form-label">Address 2</label> + <input type="text" class="form-control" id="inputAddress2" placeholder="Apartment, studio, or floor"> + </div> + <div class="row"> + <div class="form-group col-md-6"> + <label for="inputCity" class="col-form-label">City</label> + <input type="text" class="form-control" id="inputCity"> + </div> + <div class="form-group col-md-4"> + <label for="inputState" class="col-form-label">State</label> + <select id="inputState" class="form-control">Choose</select> + </div> + <div class="form-group col-md-2"> + <label for="inputZip" class="col-form-label">Zip</label> + <input type="text" class="form-control" id="inputZip"> + </div> + </div> + <div class="form-group"> + <div class="form-check"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Check me out + </label> + </div> + </div> + <button type="submit" class="btn btn-primary">Sign in</button> + </form> +</div> +{% endexample %} + Grid-based form layouts also support large and small inputs. {% example html %} @@ -413,7 +464,6 @@ Grid-based form layouts also support large and small inputs. </div> {% endexample %} - ## Checkboxes and radios Default checkboxes and radios are improved upon with the help of `.form-check`, **a single class for both input types that improves the layout and behavior of their HTML elements**. Checkboxes are for selecting one or several options in a list, while radios are for selecting one option from many. @@ -674,8 +724,8 @@ Inline text can use any typical inline HTML element (be it a `<small>`, `<span>` {% example html %} <form class="form-inline"> <div class="form-group"> - <label for="inputPassword4">Password</label> - <input type="password" id="inputPassword4" class="form-control mx-sm-3" aria-describedby="passwordHelpInline"> + <label for="inputPassword6">Password</label> + <input type="password" id="inputPassword6" class="form-control mx-sm-3" aria-describedby="passwordHelpInline"> <small id="passwordHelpInline" class="text-muted"> Must be 8-20 characters long. </small> |