Bootstrap align text with checkbox

Question

I'm trying to align a form but the elements are not aligning, how do you align the text in a form with the checkbox on the next line?

Here's what I see right now:

Here's my code:

      <div class="form-group" id="LocationOption">
    <div class="form-check">
      <label class="form-check-label col-md-3">*Been to this location before?</label>

      <input class="form-check-input col-md-1" type="radio" name="Location_sel" id="LocationYes" value="Yes" onclick="location_select(1)">
      <label class="form-check-label col-md-2 text-center" for="LocationYes">Yes</label>

      <input class="form-check-input col-md-1" type="radio" name="Location_sel" id="LocationNo" value="No" onclick="location_select(0)">
      <label class="form-check-label col-md-2 text-center" for="LocationNo">No</label>
    </div>
  </div>

  <div class="form-group">
    <div class="form-check col-md-9">
      <input class="form-check-input" type="checkbox" id="TnC" value="TnC">
      <label class="form-check-label" for="TnC">
        By clicking submit, you agree to our <a class="text-primary" style="cursor: pointer" data-toggle="modal" data-target="#exampleModalLong">Terms and Conditions</a>
      </label>
      <label class="form-check-label text-danger" id="TnCAlert"></label>
    </div>
  </div>

@Master.Deep yes 2 different lines please, just align the left — user3157674
– user3157674, Commented Dec 9, 2020 at 14:42

TinsG · Accepted Answer · 2020-12-09 06:24:48Z

2

Html

<div class="form">
    <div class="form-group" id="LocationOption">
        <div class="form-check">
            <label class="form-check-label col-md-3">*Been to this location before?</label>

            <input class="form-check-input col-md-1" type="radio" name="Location_sel" id="LocationYes" value="Yes"
                onclick="location_select(1)">
            <label class="form-check-label col-md-2 text-center" for="LocationYes">Yes</label>

            <input class="form-check-input col-md-1" type="radio" name="Location_sel" id="LocationNo" value="No"
                onclick="location_select(0)">
            <label class="form-check-label col-md-2 text-center" for="LocationNo">No</label>
        </div>
    </div>

    <div class="form-group">
        <div class="form-check col-md-9">
            <input class="form-check-input" type="checkbox" id="TnC" value="TnC">
            <label class="form-check-label" for="TnC">
                By clicking submit, you agree to our <a class="text-primary" style="cursor: pointer" data-toggle="modal"
                    data-target="#exampleModalLong">Terms and Conditions</a>
            </label>
            <label class="form-check-label text-danger" id="TnCAlert"></label>
        </div>
    </div>
</div>

css

.form{ display:flex; }

answered Dec 9, 2020 at 6:24

TinsG

1632 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user3157674 Over a year ago

Thank you, but with this I get everything displaying in one line, i'm looking for the "been to this location before" and the terms and conditions line on two different lines but just alligning the left

TinsG Over a year ago

ooh you can add ml-3 to the checkbox lable class like <label class="form-check-label ml-3" for="TnC">

Collectives™ on Stack Overflow

Bootstrap align text with checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related