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 Basics Building Forms With Bootstrap Custom Form Controls for Cross-Browser Consistency

Elena Man
Elena Man
21,092 Points
Posted by Elena Man
Elena Man
21,092 Points

Bootstrap 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
Diana Rincon
3,667 Points
Diana Rincon
Diana Rincon
3,667 Points

For 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">
Brian Quan
Brian Quan
4,049 Points
Brian Quan
Brian Quan
4,049 Points

Thank you! This worked :)

John Kennedy
.a{fill-rule:evenodd;}techdegree
John Kennedy
Front End Web Development Techdegree Student 9,663 Points

This works, thanks!

mohamedahmedgehad
mohamedahmedgehad
11,541 Points

Thank you, it worked!

Ekramy M.Ali
Ekramy M.Ali
17,748 Points
Ekramy M.Ali
Ekramy M.Ali
17,748 Points

Thank you Diana Rincon It's working now.

James Deacon
James Deacon
4,403 Points
James Deacon
James Deacon
4,403 Points

Code 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
Mihael Hunjet
3,397 Points

Hi James Thanks for this.

Guil remove this id="customCheck1" from input.

Kevin Gates
Kevin Gates
15,053 Points
Kevin Gates
Kevin Gates
15,053 Points

Guil Hernandez : can you update the teacher's notes to reflect this inconsistency?

Tomáš Komprs
Tomáš Komprs
14,057 Points
Tomáš Komprs
Tomáš Komprs
14,057 Points

The 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
Alex Bauer
9,426 Points
Alex Bauer
Alex Bauer
9,426 Points

This! Thank you. Once I put in the new stylesheet it worked fine with the updated bootstrap code.

Gabriel Plackey
Gabriel Plackey
11,064 Points
Gabriel Plackey
Gabriel Plackey
11,064 Points

If 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
Cynthia Morgan
3,640 Points
Cynthia Morgan
Cynthia Morgan
3,640 Points

Yep! 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
Gemz Nunn
16,296 Points
Gemz Nunn
Gemz Nunn
16,296 Points

I had this same problem and updating to the latest stylesheet fixed the problem.

Tom Madsen
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Tom Madsen
Front End Web Development Techdegree Graduate 19,030 Points
Tom Madsen
.a{fill-rule:evenodd;}techdegree seal-36
Tom Madsen
Front End Web Development Techdegree Graduate 19,030 Points

As 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
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
melissamyra
Front End Web Development Techdegree Graduate 18,858 Points
melissamyra
.a{fill-rule:evenodd;}techdegree seal-36
melissamyra
Front End Web Development Techdegree Graduate 18,858 Points

As 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
Eduard Edwin
14,569 Points

Thanks for this. Glad to found another Sabahan taking Treehouse course here! :)

James Deacon
James Deacon
4,403 Points
James Deacon
James Deacon
4,403 Points

Bootstrap 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
damon5
11,405 Points
damon5
damon5
11,405 Points

Been a year and this still isn't updated.. Alarming.