Checkbox sits on top of the label instead of to the left of the label

Question

I am using a bootstrap multiselect plugin in my project but for some reason the checkboxes and labels are not inline. please see pic below.

This is what I am trying to achienve.

Here is my HTML below.

<div class="hs_cats field hs-form-field">
                <select id="catSelect" multiple="multiple">
                    {% for category in categories %}
                        <option value="{{ category.catDescription }}">{{ category.catDescription }}</option>
                    {% endfor %}
                </select>
            </div>

JQuery code below.

$('#catSelect').multiselect({
        buttonWidth: '100%',
        includeSelectAllOption: true,
        maxHeight: 300
    });

I've also included this pic below, if it helps.

Is there a simpler solution to fix this problem?

Thanking you in advance.

Answer 1

It is visible on your screenshot that your inputs take display: block; from your reg_form.css file. So they act like block elements (meaning they take up entire width of the line and prevent other elements from sitting next to them).

I would argue that you should never style input element directly. Cannot think of a case when a checkbox and a text input will share all the styles.

So you should change your styles to something like this:

.steps input[type="text"], .steps textarea {
  outline: none;
  display: block;
  /* and whatever styles follow in your file */
}

If you have other input types (like email or password), add them separately, just like the text input (for example: input[type="email"])