Rachel S
Rachel S

Reputation: 3920

Bootsrap checkbox and text on same line

In Bootstrap, how do I get checkboxes to align with other text on the same line? The checkboxes are always hanging lower than a line of text. I tried wrapping the separate text in a div and adding padding but it does nothing.

<div class="col-xs-12 move-down">
  <div style="padding-top:7px; display:inline-block;">This is a new email address. Would you like to:</div>
  <div style="display:inline-block;">
    <label class="checkbox-inline" data-toggle="collapse" href="#collapsesignup">
    <input type="checkbox" id="" value="option1"> Create account
  </label> <label class="checkbox-inline">
    <input type="checkbox" id="" value="option1"> Guest checkout
  </label>
  </div>
</div>

enter image description here

Upvotes: 0

Views: 4231

Answers (1)

Jacob Goh
Jacob Goh

Reputation: 20845

Looks fine when I copy your code into a jsfiddle

But, in situation like this, a position: relative would be helpful

https://jsfiddle.net/jacobgoh101/wne16hm1/

.checkbox-wrapper {
  position: relative;
  top: -1px;
}

Upvotes: 1

Related Questions