Put form labels left of the fields? This is an age-old debate in Drupal, and I am surprised this has not been asked before on Drupal Answers. Maybe I missed it.

By default, Drupal form labels are always displayed at the top of form elements.

How can I display form element labels to the left (or right) of the element, instead of at the top?

I am talking about entity edit forms, but also other forms.

I am sure I will find a solution with hook_form_alter() or on the theme layer. But the question is, what is a convenient and maintainable way to do this?

I am personally working with Bootstrap theme, but a generic answer is preferable, so others can benefit too.

EDIT: It also would be nice to have an elegant way to control which forms this should apply to, and where it should not. Since I added this later, it should be considered optional.

UX background

The main argument for labels at the top is that they are supposedly easier to read. E.g. here, http://www.wunderkraut.com/blog/why-top-aligned-labels-are-better-in-drupal-forms/2010-12-28

I personally think this is an answer to the wrong question. The form labels might be easier to read this way. But if you look at a pre-filled form, e.g. when editing an entity, then usually the field values are far more interesting than the labels. Often the labels are already evident from the field value. E.g. a street name looks like a street name. An email looks like an email.

And of course with labels on the side the form will look more compact and less cluttered, and more of it will fit "above the fold".

Another design option would be in-field labels. But with these, the label is completely gone when the field is filled out. You may still want the labels to make sure that every value is in the correct field.

So having labels on the side is a valid design goal..
As when it comes to theming stuff, you should always ask your self: Can I do this with CSS? The answer in this case is yes.

label { float: left padding-right: 3px; } 

Example

OR (probably best to go with)

label { display: inline }
input { display: inline }


Example 2

You will need to add the css code to your administration theme .css file.