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

Nenad Marinkovic
Nenad Marinkovic
13,310 Points
Posted by Nenad Marinkovic
Nenad Marinkovic
13,310 Points

Why 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

Michael Thompson
Michael Thompson
7,427 Points
Michael Thompson
Michael Thompson
7,427 Points

I'm dealing with the same issue. Did you ever figure it out?

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

Your 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
Zhen Wong
7,816 Points
Zhen Wong
Zhen Wong
7,816 Points

I 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
Jaymes Young
36,282 Points

That was very helpful, I sometimes forget how fast things change.

Daniel Jordan Neal
Daniel Jordan Neal
11,767 Points

This 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
Carlos Reyes
30,056 Points
Carlos Reyes
Carlos Reyes
30,056 Points

The code following the link didn't work, using the one in the video does.

Julianna Kahn
Julianna Kahn
20,702 Points
Julianna Kahn
Julianna Kahn
20,702 Points

Yes, 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
Michael Thompson
7,427 Points
Michael Thompson
Michael Thompson
7,427 Points

I 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.

Max Weir
Max Weir
14,963 Points
Max Weir
Max Weir
14,963 Points

I had issues with the alpha version, looks like they fixed that for the released version though.

Peter Huang
Peter Huang
5,427 Points
Peter Huang
Peter Huang
5,427 Points

the new video thats current with current bootstrap does not even have this code and only have basic check box with no effect..