diff options
Diffstat (limited to 'docs')
| -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"> |