Add .form-inline
to your form (which doesn't have to be a <form>
) for left-aligned and inline-block controls. This only applies to forms within viewports that are at least 768px wide.
Inputs and selects have width: 100%;
applied by default in Bootstrap. Within inline forms, we reset that to width: auto;
so multiple controls can reside on the same line. Depending on your layout, additional custom widths may be required.
Screen readers will have trouble with your forms if you don't include a label for every input. For these inline forms, you can hide the labels using the .sr-only
class. There are further alternative methods of providing a label for assistive technologies, such as the aria-label
, aria-labelledby
or title
attribute. If none of these is present, screen readers may resort to using the placeholder
attribute, if present, but note that use of placeholder
as a replacement for other labelling methods is not advised.