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 Custom Form Controls for Cross-Browser Consistency

Posted by Ben King
Ben King
Courses Plus Student 4,350 Points

Hi, when I stacked the checkboxes they overflowed outside of the modal box. Shouldn't the modal box auto resize? How do?

<hr class="m-y-2"> <h5 class="m-b-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">Check this custom checkbox</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">Check this custom checkbox</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">Check this custom checkbox</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">Check this custom checkbox</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">Check this custom checkbox</span> </label> </div>

4 Answers

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Ben,

I had some trouble with this as well when using Bootstrap v4.0.0-alpha.5. The method of dealing with checkboxes has somewhat changed from what is used in the video.

First, you don' t to need wrap all the <label> elements in one "form-group" div anymore, and you won't be using "custom-controls-stacked" at all. Instead, each <label> element will need to be wrapped in its own <div> with a class="form-check".

If you look at the Checkbox and radios page you can see the following quotes:

"Default checkboxes and radios are improved upon with the help of .form-check..."

"By default, any number of checkboxes and radios that are immediate sibling will be vertically stacked and appropriately spaced with .form-check."

I should note that this solution was already provided by Sherrie Gosset in "stacking-custom-controls-checkboxes-not-working". The one difference is that the margin classes need to be updated to work with the current version of Bootstrap.

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

            <div class="form-check">
              <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 Frameworks</span>
              </label>
            </div>
            <div class="form-check">
              <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>
            </div>
            <div class="form-check">
              <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>
            </div>
            <div class="form-check">
              <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>
            </div> 
            <div class="form-check">
              <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>
rays0
rays0
16,293 Points
rays0
rays0
16,293 Points

A way to keep the 'form-group' with 'custom-controls-stacked' is to add 'clearfix' to the class of the container div.

Ben King
PLUS
Ben King
Courses Plus Student 4,350 Points
Ben King
Ben King
Courses Plus Student 4,350 Points

Thank you for you assistance. I couldn't see what I was missing. Thanks again.

Ben

John Barhorst
John Barhorst
9,648 Points
John Barhorst
John Barhorst
9,648 Points

I had this issue too, thanks gang! I had tried to solve it with the Bootstrap option to stack for radio boxes. Apparently it doesn't work the same for check boxes. That involved putting all the boxes in one div with the class of "custom-controls-stacked".

Maybe I did it wrong, and it could work for you. But div'ing up each individual check-box is a sure fire way to fix this issue.