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 trialNenad Marinkovic
13,310 PointsWhy is browser displaying checkboxes like this?
This code from the new Boostrap 4 documentations is not working as it should be, or I am doing something wrong here. Please help and thank you.
<div class="form-check"> <input class="form-check-input" type="checkbox" value="" id="defaultCheck1"> <label class="form-check-label" for="defaultCheck1">JS Frameworks</label> </div>
Picture from my page: https://imgur.com/a/RzHFb
Max Weir
14,963 PointsYour markup looks fine. Maybe inspect the css for all three BS classes and compare with their documented class values to ensure nothing is missing.
See: http://getbootstrap.com/docs/4.0/components/forms/#default-stacked
4 Answers
Zhen Wong
7,816 PointsI faced the same problem with this lesson few months ago. If you look at the bootstrap cdn on top, it is probably not the latest one which you are referring to (I assume you are referring to the latest bootstrap v4.0.0). Replace with the latest bootstrap cdn and it will work.
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
Alternatively, if you do not want to change the cdn that was provided which probably has something like that in the cdn href="...4.0.0-beta..." then you will need to use the form-check from the previous older version bootstrap (v4.0.0-alpha.6)
<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>
Jaymes Young
36,282 PointsThat was very helpful, I sometimes forget how fast things change.
Daniel Jordan Neal
11,767 PointsThis worked for me. I had to update the script CDN's in an earlier video to get the desired formatting as well. As someone else said, certainly a reminder of how fast things change.
Carlos Reyes
30,056 PointsThe code following the link didn't work, using the one in the video does.
Julianna Kahn
20,702 PointsYes, your code works great! Thanks so much. It looks nothing like the code on the current site. I am using the 4.0.0 version that comes with the downloaded files.
Michael Thompson
7,427 PointsI ended up adding a left margin and it pushed them back in to the frame. But I had to rewrite the code the way it is in the video to get the blue checks.
Nenad Marinkovic
13,310 PointsI did just the same!
Max Weir
14,963 PointsI had issues with the alpha version, looks like they fixed that for the released version though.
Peter Huang
5,427 Pointsthe new video thats current with current bootstrap does not even have this code and only have basic check box with no effect..
Michael Thompson
7,427 PointsMichael Thompson
7,427 PointsI'm dealing with the same issue. Did you ever figure it out?