diff options
| author | Mark Otto <[email protected]> | 2017-05-26 21:54:35 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2017-05-26 21:54:35 -0700 |
| commit | f3acf9d890568e7ecaab0c4218f51f4afb7489d7 (patch) | |
| tree | fd810fd73008ed9781ecf0d4114d2f5226bbc032 /docs | |
| parent | 9e6644a20685d1276e569020cb930c635df9acd7 (diff) | |
| download | bootstrap-f3acf9d890568e7ecaab0c4218f51f4afb7489d7.tar.xz bootstrap-f3acf9d890568e7ecaab0c4218f51f4afb7489d7.zip | |
custom forms example with new grid styles
Diffstat (limited to 'docs')
| -rw-r--r-- | docs/components/forms.md | 26 |
1 files changed, 26 insertions, 0 deletions
diff --git a/docs/components/forms.md b/docs/components/forms.md index d71615976..feadf19bc 100644 --- a/docs/components/forms.md +++ b/docs/components/forms.md @@ -325,6 +325,32 @@ The `.form-group` class is the easiest way to add some structure to forms. Its o </form> {% endexample %} +{% example html %} +<form> + <div class="row gutters-sm align-items-center"> + <div class="col-auto"> + <label class="mr-sm-2" for="inlineFormCustomSelect">Preference</label> + <select class="custom-select mb-2 mr-sm-2 mb-sm-0" id="inlineFormCustomSelect"> + <option selected>Choose...</option> + <option value="1">One</option> + <option value="2">Two</option> + <option value="3">Three</option> + </select> + </div> + <div class="col-auto"> + <label class="custom-control custom-checkbox mb-2 mr-sm-2 mb-sm-0"> + <input type="checkbox" class="custom-control-input"> + <span class="custom-control-indicator"></span> + <span class="custom-control-description">Remember my preference</span> + </label> + </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. |