<p>Do not mix form groups directly with <ahref="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
</div>
<divclass="bs-callout bs-callout-warning">
<h4>Don't mix form groups with input groups</h4>
<p>Do not mix form groups directly with <ahref="/components/#input-groups">input groups</a>. Instead, nest the input group inside of the form group.</p>
</div>
<h2id="forms-inline">Inline form</h2>
<p>Add <code>.form-inline</code> to your <code><form></code> for left-aligned and inline-block controls. <strong>This only applies to forms within viewports that are at least 768px wide.</strong></p>
<divclass="bs-callout bs-callout-danger">
<h4>Requires custom widths</h4>
<p>Inputs, selects, and textareas are 100% wide by default in Bootstrap. To use the inline form, you'll have to set a width on the form controls used within.</p>
<p>Inputs and selects have <code>width: 100%;</code> applied by default in Bootstrap. Within inline forms, we reset that to <code>width: auto;</code> so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.</p>