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

Kelly Musgrove
Kelly Musgrove
16,453 Points
Posted by Kelly Musgrove
Kelly Musgrove
16,453 Points

Stacking Custom Controls / Checkboxes Not Working

Hello! It seems that the bootstrap code for custom forms has changed a bit since this video was created. However, even when using the updated code, stacking the controls is not working for me. It looks like c-inputs-stacked is no longer in use, and has been replaced by custom-controls-stacked... but I still am not able to get it working.

Let me know if I'm mistaken there. If somebody could let me know if my code is incorrect, or if it's just a bug within bootstrap, that would be great!

Here's the link to bootstrap's custom checkboxes:

http://v4-alpha.getbootstrap.com/components/forms/?#checkboxes

Here's my code:

              <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 Frameworks</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>

Thank you!!

8 Answers

Sherrie Gossett
Sherrie Gossett
14,924 Points
Sherrie Gossett
Sherrie Gossett
14,924 Points

This code works in alpha.2, alpha.3, and alpha.4: 

<hr class="m-y-2">
<h5 class="m-b-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>
  </form>

<!-- /registration form -->
ziakarim
ziakarim
20,779 Points
ziakarim
ziakarim
20,779 Points

+1 on Sherrie's response. Thank you!

Minor change needed to support alpha.5. Replace m-y-2 with my-2 and m-b-2 with mb-2.

docgunthrop
docgunthrop
12,445 Points
docgunthrop
docgunthrop
12,445 Points

The information is at the following link: https://v4-alpha.getbootstrap.com/components/forms/#checkboxes This is Bootstrap 4, alpha 3 (as of Aug 25, 2016). To get your code to work as Guil has demonstrated, update it as follows:

<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>
    JavaScript Frameworks
  </label>
</div>
Andrey Gorbi
Andrey Gorbi
12,993 Points
Andrey Gorbi
Andrey Gorbi
12,993 Points

For v4.0.0-alpha.5:

<div class="form-group mb-0"> <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-group mb-0"> <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-group mb-0"> <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>

Each checkbox in a div

Albert Nassif
Albert Nassif
9,534 Points
Albert Nassif
Albert Nassif
9,534 Points

Thank you, this works perfectly in the most up to date version of bootstrap, took me a while to figure out which method of doing it works out like Guil's representation.

Tim Makin
Tim Makin
17,261 Points
Tim Makin
Tim Makin
17,261 Points

Hi Kelly,

I can't see anything wrong with your code. It's exactly the same as the code I've used in my project which is stacking the checkboxes correctly. I even copied your code into my project and it worked as well.

It's difficult to know without seeing the rest of the code but maybe that code snippet is incorrectly nested in some other elements which is causing the elements not to stack as expected.

Sorry I couldn't be more help.

Tim

David Victorine
David Victorine
7,429 Points
David Victorine
David Victorine
7,429 Points

I'm having the same problem and I think it's got something to do with the div class not matching the label class?:

<hr class="m-y-2"> <h5 class="m-b-2">Which Topics Interest You Most?</h5>

                    <div class="form-group c-inputs-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 Frameworks</span> </label>

Kelly Musgrove
Kelly Musgrove
16,453 Points
Kelly Musgrove
Kelly Musgrove
16,453 Points

Hi David, I think the issue I was having is that I was using the link for the latest release at the time (version 4.0.0-alpha.2), which had a bug. If you use the most recent version, it should work (it did for me after I went back and updated it, anyways). This is the stylesheet/CDN link for the newest version:

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.3/css/bootstrap.min.css" integrity="sha384-MIwDKRSSImVFAZCVLtU0LMDdON6KVCrZHyVQQj6e8wIEJkW4tvwqXrbMIya1vriY" crossorigin="anonymous">

Here are the updated classes to use:

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

Hope that helps!

:) Kelly

David Victorine
David Victorine
7,429 Points
David Victorine
David Victorine
7,429 Points

Thank you Kelly and Docgunthrop!

I was able to get it to work using the info from both of your answers!

I had somehow thought that there should only be one label class for the whole list of checkboxes.

Living and learning...

Thanks!

Sherrie Gossett
Sherrie Gossett
14,924 Points
Sherrie Gossett
Sherrie Gossett
14,924 Points

Thanks ziakarim - I didn't realize alpha.5 is out already.

robertvandeweghe
robertvandeweghe
8,120 Points
robertvandeweghe
robertvandeweghe
8,120 Points

beta 5

            <div class="form-check">
            <label class="form-check-label">
             <input class="form-check-input" type="checkbox" value"none">
             JavaScript Frameworks
           </label>
         </div>

"form-check" did it for me and the appropriate link!

https://v4-alpha.getbootstrap.com/components/forms/#default-stacked

Albert Nassif
Albert Nassif
9,534 Points
Albert Nassif
Albert Nassif
9,534 Points

That is the default checkbox way of doing it but Guil is using the custom checkbox classes, I think Andrey Gorbi's method of implementation is closer to what Guil is trying to do here.