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 trialElena Man
21,092 PointsBootstrap Forms Checkbox Code
Hi!
There is a difference between the code for the check-boxes that is in the video and the one posted on the site at the present moment.
The latest code shown on the bootstrap site now is the following:
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">Check this custom checkbox</label>
</div>
The problem is that in my browser, the latest code doesn't show the checkbox, only the text and I can't seem to figure out why.
10 Answers
Diana Rincon
3,667 PointsFor the newer code to work I replaced the BootstrapCDN on the HTML:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
James Deacon
4,403 PointsCode from the video
<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>
Mihael Hunjet
3,397 PointsHi James Thanks for this.
Guil remove this id="customCheck1" from input.
Kevin Gates
15,053 PointsGuil Hernandez : can you update the teacher's notes to reflect this inconsistency?
Karina Rogers
Front End Web Development Techdegree Graduate 15,909 PointsGuil Hernandez can you please update the teachers notes?
Tomáš Komprs
14,057 PointsThe Problem is: in video is bootsrap 4.0 beta and lates is 4.1.x. So we need update our BoodStrapCDN . And than the Code is little diffrent right now:
```<div class="form-check">
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" id="customCheck1">
<label class="custom-control-label" for="customCheck1">JavaScript basic</label>
</div>
</div>
```
As we can see <input> use id="customCheck1" AND <label> use for="customCheck1" We need change a number for every other checkBox. Like a: id="customCheck2" AND for="customCheck2"
Alex Bauer
9,426 PointsThis! Thank you. Once I put in the new stylesheet it worked fine with the updated bootstrap code.
Gabriel Plackey
11,064 PointsIf you're using the latest code from bootstrap, I would make sure you are also importing the latest bootstrap style sheet as well. The one in the video could be older, and not work with the newer code you are using.
Cynthia Morgan
3,640 PointsYep! That's the problem. You have to update ALL of the style sheets (provided in the workspace automatically) to the most recent. This includes CSS style sheet, and the JS scripts at the bottom (jQuery, Popper.js, and Bootratp's JS plugin). Then the checkbox works! (with the copied code from bootsrap 4)
Gemz Nunn
16,296 PointsI had this same problem and updating to the latest stylesheet fixed the problem.
Tom Madsen
Front End Web Development Techdegree Graduate 19,030 PointsAs of Dec 20 2019, the latest CSS CDN is:
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
melissamyra
Front End Web Development Techdegree Graduate 18,858 PointsAs of June 25th 2020 - the latest Bootstrap css CDN is
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" integrity="sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc+NcPb1dKGj7Sk" crossorigin="anonymous">
(lol - notes should probably include reminder to use the latest CDN links) :(
Eduard Edwin
14,569 PointsThanks for this. Glad to found another Sabahan taking Treehouse course here! :)
James Deacon
4,403 PointsBootstrap docs vs the instructions are still inconsistent (over a month after being highlighted), and the newer code does not work in the same way/as demonstrated. Able to copy the code from the project files, but feel that this should at least be added as a teacher note.
damon5
11,405 PointsBeen a year and this still isn't updated.. Alarming.
Brian Quan
4,049 PointsBrian Quan
4,049 PointsThank you! This worked :)
John Kennedy
Front End Web Development Techdegree Student 9,663 PointsJohn Kennedy
Front End Web Development Techdegree Student 9,663 PointsThis works, thanks!
mohamedahmedgehad
11,541 Pointsmohamedahmedgehad
11,541 PointsThank you, it worked!
Ekramy M.Ali
17,748 PointsEkramy M.Ali
17,748 PointsThank you Diana Rincon It's working now.