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

Hamza Hajji
Hamza Hajji
11,931 Points
Posted by Hamza Hajji
Hamza Hajji
11,931 Points

Ceckboxes Problem

The checkboxes don't appear stacked like in the video, they appear inline how do i fix this ? here's a screenshot of how it looks like: alt text

Matt Brock
Matt Brock
28,330 Points

Could you add the screenshot again? It's not working. Don't forget to use the alt text syntax for markdown.

Ash Scott
Ash Scott
435 Points
Ash Scott
Ash Scott
435 Points

Do you have a work space we can check? You can wrap each checkbox + its label in a div (which is a block level element). If it's in a div already, then in your CSS you need to add display: block to the div, and that should do the trick. Another way is line breaks, but i'm telling you more as an FYI, not as a suggestion to use them :)

Hamza Hajji
Hamza Hajji
11,931 Points
Hamza Hajji
Hamza Hajji
11,931 Points

Yeah but in the video he just used them like that and the labels were block level elements here's the code from my text editor it's exactly what he wrote:

''' html <hr class="m-y-2"> <h5 class="m-b-2">Which Topics Interest You Most?</h5> <div class="form-group"> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> JavaScript Frameworks </label> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> JavaScript Libraries </label> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> Node.js </label> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> Build Tools </label> <label class="custom-control custom-checkbox"> <input type="checkbox" class="custom-control-input"> <span class="custom-control-indicator"></span> ES2015 </label> </div> '''

4 Answers

Ash Scott
Ash Scott
435 Points
Ash Scott
Ash Scott
435 Points

Found the issue I think. After the <h5>, you need to add the .c-inputs-stacked class to the same div which has the .form-group class. That should do the trick!

What this does is adds an after tag to the label which is display: block causing them to stack like they are

Robertin Datkov
Robertin Datkov
11,558 Points
Robertin Datkov
Robertin Datkov
11,558 Points

I have the same problem and I do have the c-inputs-stacked class added to my div element. When I download the project files and run the HTML from my PC everything works fine and then I tried copying the div with the checkboxes form the project files to my workspace project but it doesn't work the same way.... So It might be something else... dunno

here is my code: https://gist.github.com/anonymous/080607748e074b8c77701cb4711ab395

Olga Mendenhall
Olga Mendenhall
8,809 Points
Olga Mendenhall
Olga Mendenhall
8,809 Points

Instead of ''' <div class="form-group c-inputs-stacked"> ''' put this ''' <div class="custom-controls-stacked"> '''

And also change your class names:

     ''' <div class="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>  '''

Bootstrap now provides different names for those classes - (http://v4-alpha.getbootstrap.com/components/forms/#checkboxes)

Jing Zhang
PLUS
Jing Zhang
Courses Plus Student 6,465 Points
Jing Zhang
Jing Zhang
Courses Plus Student 6,465 Points 
                    <div class="form-group">
                        <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>
                    </div>
robertvandeweghe
robertvandeweghe
8,120 Points
robertvandeweghe
robertvandeweghe
8,120 Points

I think its becuase Guil is using an older version of Bootstrap...

I am using bootstrap 4.5 and had to trouble shoot through http://v4-alpha.getbootstrap.com/components/forms/

Check it out But this HTML worked for me.

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

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