diff options
| author | Mark Otto <[email protected]> | 2016-10-28 16:38:30 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2016-10-28 16:38:30 -0700 |
| commit | 6a11ae580d0e233449aefdaf250b08019d7fe96d (patch) | |
| tree | 76b5f436baee7bdf56c19194c2e8cb8487d83ed8 /docs/components/forms.md | |
| parent | a6cd4937af4c095714095ca2b0ac457a6d5ebb92 (diff) | |
| download | bootstrap-6a11ae580d0e233449aefdaf250b08019d7fe96d.tar.xz bootstrap-6a11ae580d0e233449aefdaf250b08019d7fe96d.zip | |
add horizontal form examples
Diffstat (limited to 'docs/components/forms.md')
| -rw-r--r-- | docs/components/forms.md | 35 |
1 files changed, 35 insertions, 0 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index cf5a8473e..2a2e9f9d2 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -737,6 +737,41 @@ Here are some examples of the aforementioned classes in action. First up is your </div> {% endexample %} +Those same states can also be used with horizontal forms. + +{% example html %} +<div class="container"> + <form> + <div class="form-group row has-success"> + <label for="inputHorizontalSuccess" class="col-sm-2 col-form-label">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control form-control-success" id="inputHorizontalSuccess" placeholder="[email protected]"> + <div class="form-control-feedback">Success! You've done it.</div> + <small class="form-text text-muted">Example help text that remains unchanged.</small> + </div> + </div> + <div class="form-group row has-warning"> + <label for="inputHorizontalWarning" class="col-sm-2 col-form-label">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control form-control-warning" id="inputHorizontalWarning" placeholder="[email protected]"> + <div class="form-control-feedback">Shucks, check the formatting of that and try again.</div> + <small class="form-text text-muted">Example help text that remains unchanged.</small> + </div> + </div> + <div class="form-group row has-danger"> + <label for="inputHorizontalDnger" class="col-sm-2 col-form-label">Email</label> + <div class="col-sm-10"> + <input type="email" class="form-control form-control-danger" id="inputHorizontalDnger" placeholder="[email protected]"> + <div class="form-control-feedback">Sorry, that username's taken. Try another?</div> + <small class="form-text text-muted">Example help text that remains unchanged.</small> + </div> + </div> + </form> +</div> +{% endexample %} + +Checkboxes and radios are also supported. + {% example html %} <div class="form-check has-success"> <label class="form-check-label"> |