diff options
| author | Mark Otto <[email protected]> | 2014-06-18 18:19:17 -0700 |
|---|---|---|
| committer | Mark Otto <[email protected]> | 2014-06-18 18:19:17 -0700 |
| commit | 74a264fb98ced0228d385d601e9edd913bb1b173 (patch) | |
| tree | e3272926dcf1339fa1b3786f9d4ffd330340cea9 /docs/_includes/css/forms.html | |
| parent | 46e8a5817d0ddb98343dde1e0f0f8b335aba41e3 (diff) | |
| download | bootstrap-74a264fb98ced0228d385d601e9edd913bb1b173.tar.xz bootstrap-74a264fb98ced0228d385d601e9edd913bb1b173.zip | |
fixes #13021: add .form-group-sm/-lg
Diffstat (limited to 'docs/_includes/css/forms.html')
| -rw-r--r-- | docs/_includes/css/forms.html | 36 |
1 files changed, 36 insertions, 0 deletions
diff --git a/docs/_includes/css/forms.html b/docs/_includes/css/forms.html index 95bb29c59..947c5179c 100644 --- a/docs/_includes/css/forms.html +++ b/docs/_includes/css/forms.html @@ -670,6 +670,42 @@ <select class="form-control input-sm">...</select> {% endhighlight %} + <h3>Horizontal form group sizes</h3> + <p>Quickly size labels and form controls within <code>.form-horizontal</code> by adding <code>.form-group-lg</code> or <code>.form-group-sm</code>.</p> + <div class="bs-example"> + <form class="form-horizontal" role="form"> + <div class="form-group form-group-lg"> + <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" name="formGroupInputLarge" placeholder="Large input"> + </div> + </div> + <div class="form-group form-group-sm"> + <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" name="formGroupInputSmall" placeholder="Small input"> + </div> + </div> + </form> + </div><!-- /.bs-example --> +{% highlight html %} +<form class="form-horizontal" role="form"> + <div class="form-group form-group-lg"> + <label class="col-sm-2 control-label" for="formGroupInputLarge">Large label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" name="formGroupInputLarge" placeholder="Large input"> + </div> + </div> + <div class="form-group form-group-sm"> + <label class="col-sm-2 control-label" for="formGroupInputSmall">Small label</label> + <div class="col-sm-10"> + <input class="form-control" type="text" name="formGroupInputSmall" placeholder="Small input"> + </div> + </div> +</form> +{% endhighlight %} + + <h3>Column sizing</h3> <p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p> <div class="bs-example"> |