I use a checkbox from the React-Bootstrap library this way:

var checkBtn = ce(bootstrap.Input, {type: "checkbox", label: "Multiplied ",
checked: this.isChecked, id: "multBtn", onClick: this.onChange });

and I would like to have a label on the left side. How can I do this ?

I use a checkbox from the React-Bootstrap library this way:

var checkBtn = ce(bootstrap.Input, {type: "checkbox", label: "Multiplied ",
checked: this.isChecked, id: "multBtn", onClick: this.onChange });

and I would like to have a label on the left side. How can I do this ?

• javascript
• react-bootstrap

• 1 I answered this here but realized it's already asked here too :) – kingisaac95 Commented Nov 2, 2018 at 12:02

2 Answers 2

Had answered this in a different post before someone shared this question with me.

I used flex to solve this by changing the row direction.

HTML:

<div class="checkbox">
    <label title="">
        <input type="checkbox" value="">
        Did not perform
    </label>
</div>

CSS:

div.checkbox {
  display: inline-block;
  /*ie7 -- start*/
  *display: inline;
  zoom: 1;
}

div.checkbox > label {
  display: flex;
  flex-direction: row-reverse;
}

Output:

JSFiddle: here

You can find my original post/answer here

I am having the same problem.

My workaround was to not use react-bootstrap (example using jsx):

<div className={'form-group'}>
  <label
    className={'control-label'}
    htmlFor={fieldName}
  >
    {fieldName + ':'}
  </label>
  <input
    type='checkbox'
    id={fieldName}
    name={fieldName}
    checked={fieldValue}
  />
</div>

I realize I have not answered your exact question. Hopefully someone has a real answer.