CODEWITHSUNDEEP
htmlcssforms
user3157674
user3157674

Reputation: 65

Bootstrap align text with checkbox

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: enter image description here

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>

Upvotes: 0

Views: 431

Answers (1)

TinsG
TinsG

Reputation: 163

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; }

Upvotes: 2

Related Questions