{% endhighlight %}
-
- <h2 id="forms-extending">Extending form controls</h2>
- <p>Adding on top of existing browser controls, Bootstrap includes other useful form components.</p>
-
- <h3 id="forms-input-groups">Input groups</h3>
+ <h2 id="forms-input-groups">Input groups</h3>
<p>Add text or buttons before, after, or on both sides of any text-based input. Use <code>.input-group</code> with an <code>.add-on</code> to prepend or append elements to an <code><input></code>.</p>
<div class="bs-callout bs-callout-danger">
</div>
{% endhighlight %}
- <h4>Optional sizes</h4>
+ <h3>Optional sizes</h3>
<p>Add the relative form sizing classes to the <code>.input-group-addon</code>.</p>
<form class="bs-example bs-example-form">
<div class="input-group col-lg-9">
</div>
{% endhighlight %}
- <h4>Buttons instead of text</h4>
+ <h3>Buttons instead of text</h3>
<p>Buttons in input groups are a bit different and require one extra level of nesting. Instead of <code>.input-group-addon</code>, you'll need to use <code>.input-group-btn</code> to wrap the buttons. This is required due to default browser styles that cannot be overridden.</p>
<form class="bs-example bs-example-form">
<div class="input-group col-lg-7">
</div>
{% endhighlight %}
- <h4>Button dropdowns</h4>
+ <h3>Button dropdowns</h3>
<p></p>
<form class="bs-example bs-example-form">
<div class="input-group col-lg-7">
</div><!-- /input-group -->
{% endhighlight %}
- <h4>Segmented dropdown groups</h4>
+ <h3>Segmented dropdown groups</h3>
<form class="bs-example bs-example-form">
<div class="input-group col-lg-7">
<div class="input-group-btn">
</div>
{% endhighlight %}
- <h3 id="forms-control-sizes">Control sizing</h3>
+ <h2 id="forms-control-sizes">Control sizing</h2>
<p>Use relative sizing classes like <code>.input-large</code> or match your inputs to the grid column sizes using <code>.col-lg-*</code> classes.</p>
- <h4>Relative sizing</h4>
+ <h3>Relative sizing</h3>
<p>Create larger or smaller form controls that match button sizes.</p>
<form class="bs-example bs-example-control-sizing">
<div class="controls docs-input-sizes">
<select class="form-control input-small">...</select>
{% endhighlight %}
- <h4>Column sizing</h4>
+ <h3>Column sizing</h3>
<p>Wrap inputs in grid columns, or any custom parent element, to easily enforce desired widths.</p>
<form class="bs-example" style="padding-bottom: 15px;">
<div class="row">
</div>
{% endhighlight %}
- <h3 id="forms-help-text">Help text</h3>
+ <h2 id="forms-help-text">Help text</h2>
<p>Block level help text for form controls.</p>
<form class="bs-example">
<input type="text" class="form-control">