Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS Bootstrap Basics Building Forms With Bootstrap Structured Form Layouts with the Grid

Scott Pierce
Scott Pierce
2,365 Points
Posted by Scott Pierce
Scott Pierce
2,365 Points

Form Layout is diagonal.

When I look at my form the lines indent as they get closer to the bottom of the form.

<hr my-4>
<h5 class="mb-4">Which topics interest you  most?</h5>
        <div class="form-check">
          <div class="custom-control custom-checkbox">
  <input type="checkbox" class="custom-control-input" id="customCheck1">
  <label class="custom-control-label" for="customCheck1">JavaScript Libraries</label>
</div>
<div class="form-check">
  <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck2">
<label class="custom-control-label" for="customCheck2">JavaScript Framworks</label>
</div>
<div class="form-check">
  <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck3">
<label class="custom-control-label" for="customCheck3">Node.js</label>
</div>
<div class="form-check">
  <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck4">
<label class="custom-control-label" for="customCheck4">Build Tools</label>
</div>
<div class="form-check">
  <div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck5">
<label class="custom-control-label" for="customCheck5">ES2015</label>
</div>

        </div>
  <hr class="mb-4">
  <h5 class="mb-4">Payment Info</h5>

  <div class="row">
      <div class="col-lg-6 form-group">
        <label for="cc-num">Card Number:</label>
        <input class="form-control" id="cc-num" type="text">
      </div>

      <div class="col-lg form-group">
        <label for="zip">Zip Code:</label>
        <input class="form-control" id="zip" type="text">
      </div>

      <div class="col-lg form-group">
        <label for="cvv">CVV:</label>
        <input class="form-control" id="cvv" type="text">
      </div>
    </div>
</form>

1 Answer

Zak Erving
Zak Erving
22,832 Points

Each of your form-check divs are still open. See below:

<div class="form-check">
  <div class="custom-control custom-checkbox">
    <input type="checkbox" class="custom-control-input" id="customCheck1">
    <label class="custom-control-label" for="customCheck1">JavaScript Libraries</label>
  </div>
</div> <!-- You should have another closing div here before your next 'form-check' div -->
Scott Pierce
Scott Pierce
2,365 Points
Scott Pierce
Scott Pierce
2,365 Points

That worked. Thanks!!