diff options
| author | Mark Otto <[email protected]> | 2017-05-26 20:15:30 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-26 20:15:30 -0700 |
| commit | e0e1e849e6cda0d4af88a46f7e7e5a91f8b8498d (patch) | |
| tree | e4ebbee5338d4a398140c7c7b9efc8bb1da57e90 /docs | |
| parent | a11ae7facfa13c8d85615fb9bc660b7b415f8bbf (diff) | |
| download | bootstrap-e0e1e849e6cda0d4af88a46f7e7e5a91f8b8498d.tar.xz bootstrap-e0e1e849e6cda0d4af88a46f7e7e5a91f8b8498d.zip | |
document more form layout options with grid, including some compact .gutters-sm examples
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/forms.md | 115 |
1 files changed, 115 insertions, 0 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index fd87dec7a..51d9e8f90 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -271,6 +271,121 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o </form> {% endexample %} +### Grid + +{% example html %} +<form> + <div class="row gutters-sm"> + <div class="col"> + <input type="text" class="form-control" placeholder="First name"> + </div> + <div class="col"> + <input type="text" class="form-control" placeholder="Last name"> + </div> + </div> +</form> +{% endexample html %} + +{% example html %} +<form> + <div class="row gutters-sm"> + <div class="col-7"> + <input type="text" class="form-control" placeholder="City"> + </div> + <div class="col"> + <input type="text" class="form-control" placeholder="State"> + </div> + <div class="col"> + <input type="text" class="form-control" placeholder="Zip"> + </div> + </div> +</form> +{% endexample html %} + +{% example html %} +<form> + <div class="row gutters-sm align-items-center"> + <div class="col"> + <label class="sr-only" for="inlineFormInput">Name</label> + <input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe"> + </div> + <div class="col"> + <label class="sr-only" for="inlineFormInputGroup">Username</label> + <div class="input-group mb-2 mb-sm-0"> + <div class="input-group-addon">@</div> + <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> + </div> + </div> + <div class="col"> + <div class="form-check mb-2 mb-sm-0"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Remember me + </label> + </div> + </div> + <div class="col"> + <button type="submit" class="btn btn-primary">Submit</button> + </div> + </div> +</form> +{% endexample %} + +{% example html %} +<form> + <div class="row gutters-sm align-items-center"> + <div class="col-auto"> + <label class="sr-only" for="inlineFormInput">Name</label> + <input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe"> + </div> + <div class="col-auto"> + <label class="sr-only" for="inlineFormInputGroup">Username</label> + <div class="input-group mb-2 mb-sm-0"> + <div class="input-group-addon">@</div> + <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> + </div> + </div> + <div class="col-auto"> + <div class="form-check mb-2 mb-sm-0"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Remember me + </label> + </div> + </div> + <div class="col-auto"> + <button type="submit" class="btn btn-primary">Submit</button> + </div> + </div> +</form> +{% endexample %} + +{% example html %} +<form> + <div class="row gutters-sm align-items-center"> + <div class="col-sm-3"> + <label class="sr-only" for="inlineFormInput">Name</label> + <input type="text" class="form-control mb-2 mb-sm-0" id="inlineFormInput" placeholder="Jane Doe"> + </div> + <div class="col-sm-3"> + <label class="sr-only" for="inlineFormInputGroup">Username</label> + <div class="input-group mb-2 mb-sm-0"> + <div class="input-group-addon">@</div> + <input type="text" class="form-control" id="inlineFormInputGroup" placeholder="Username"> + </div> + </div> + <div class="col-auto"> + <div class="form-check mb-2 mb-sm-0"> + <label class="form-check-label"> + <input class="form-check-input" type="checkbox"> Remember me + </label> + </div> + </div> + <div class="col-auto"> + <button type="submit" class="btn btn-primary">Submit</button> + </div> + </div> +</form> +{% endexample %} + ### Inline forms Use the `.form-inline` class to display a series of labels, form controls, and buttons on a single horizontal row. Form controls within inline forms vary slightly from their default states. |