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 4 Basics (Retired) Building Forms with Bootstrap Structured Form Layouts with the Grid

Posted by joseph arias
joseph arias
9,269 Points

Payment header is overflowing?!

Heyy guys, Soo before my checkbox options were overflowing from the form so what I did was I've added a <div> container wrapping my whole form. It worked! but now that I've the payment header below it. The payment info Header is acting wacky and out of place. Any suggestions?

my screenshot

joseph arias
joseph arias
9,269 Points

this is my code

''' <form> <div class="container"> <h4 class= "mb-2">Basic Information</h4> <div class="form-group"> <label for="name">Name:</label> <input type="text" class="form-control" id="name"> </div> <div class="form-group"> <label for="mail">Email:</label> <input type="email" class="form-control" id="mail"> </div> <div class="form-group"> <label for="role">Job Role:</label> <select class="c-select form-control" id="role" name="user_role"> <option value="full stack js developer">Full Stack JavaScript Developer</option> <option value="front end developer">Front End Developer</option> <option value="back end developer">Back End Developer</option> <option value="designer">Designer</option>
<option value="student">Student</option> Resources
</select> </div>

            <hr class="my-2">
            <h5 class="mb-2"> Which Topics Interest you Most?</h5>

            <div class="form-group custom-controls-stacked">

              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">JavaScript Framworks</span>
              </label>  
                <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">JavaScript Libraries</span>
              </label>  
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Node.js</span>
              </label> 
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">Build Tools</span>
              </label>  
              <label class="custom-control custom-checkbox">
                <input type="checkbox" class="custom-control-input">
                <span class="custom-control-indicator"></span>
                <span class="custom-control-description">ES2015</span>
              </label>  

            </div>

           <hr class="mb-2">
           <h5 class="mb-2"> Payment Info </h5>
              <div class="row">
                <div class="col-lg-6">
                  <label for="cc-num">Card Number:</label>
                  <input class="form-control" id="cc-num" type="text">
                </div>

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

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


              </div>
            </form>                          
            '''

1 Answer

Marcin Czachor
Marcin Czachor
9,641 Points
Marcin Czachor
Marcin Czachor
9,641 Points

Hey Joseph. Despite having div with class 'form-group custom-controls-stacked' you can wrap every checkbox element by a div with class 'form-check'. It should resolve problem with overflowing of payment div elements.