Welcome to the Treehouse Community

The Treehouse Community is a meeting place for developers, designers, and programmers of all backgrounds and skill levels to get support. Collaborate here on code errors or bugs that you need feedback on, or asking for an extra set of eyes on your latest project. Join thousands of Treehouse students and alumni in the community today. (Note: Only Treehouse students can comment or ask questions, but non-students are welcome to browse our conversations.)

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and a supportive community. Start your free trial today.

HTML

problems with bootstrap coping examples they don't render as shown

i am following Gills basic bootstrap and the example code snippets in his are different from bootstrap example online alpha v4 I have this Check this custom checkbox Copy <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>

and it wont render as it does on the page

he uses this and it works : ?

div class="form-group c-inputs-stacked"> <label class="c-input c-checkbox"> <input type="checkbox"> <span class="c-indicator"></span> JavaScript Frameworks </label> </div>-

i can not find his example in bootstrap docs , it seems to replace for example custom-checkbox with c-checkbox in his example. Is this older code and if so why is stuff I copied not working well at all.

Kind

Regards Laurence

3 Answers

Erik Nuber
Erik Nuber
20,629 Points

Custom forms have changed slightly between Alpha 2 and Alpha 3.

In Alpha 3, the class names are more explicit (eg, custom-control custom-checkbox in Alpha 3 vs c-input c-checkbox in Alpha 2).

Meaning that when the lesson was created, they were still on an earlier stage. The c-input and c-checkbox no longer exists. You have to read the documentation for checkboxes but, here is what they currently have.

regular checkboxes

<div class="form-check">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="">
    Option one is this and that&mdash;be sure to include why it's great
  </label>
</div>
<div class="form-check disabled">
  <label class="form-check-label">
    <input class="form-check-input" type="checkbox" value="" disabled>
    Option two is disabled
  </label>
</div>

custom checkboxes

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

I noted that but there must have been some errors in my code I tried using the latest and it failed so to make it work used his code.. Probably some typo some where but I could not find it. I did not get the double arrow heads in the select options so that must have been where things went wrong.. It was like it was ignoring the styling done by custom-controls..

I wonder if mixing old with new makes it fail, I guess not because if I create a page now and things move on in a later version of Bootstrap does that mean I need to keep applying the latest syntax to all sites... for them to keep worrking

Erik Nuber
Erik Nuber
20,629 Points

I just recently went thru that series and have started using bootstrap. If you notice in the video, the script tag says

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>

So it states it's version 4.0.0-alpha-2. So if you are still using this while following with the video but, using newer syntax I don't think it will work properly. You need to replace the script tags with what is current. I don't have enough knowledge to properly answer your question as to whether you can use old syntax with newer versions or, if you have to go back and update everything that existed before. As I just watched the series last week and followed along. Everything in the video still worked based on the correct script tag and, I just opened my workspace and it still works. So, I am guessing that as long as whatever script tag you pasted in matches what is in the video you are good. If you took the new CDN key that will lead to problems following the course.

Hopefully that helps you some.

Just in case you need it...

from the video...here is the head

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title>Full Stack Conf</title>
    <!-- bootstrap css -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/css/bootstrap.min.css" integrity="sha384-y3tfxAZXuh4HwSYylfB+J125MxIs6mR5FOHamPBG064zB+AFeWH94NdvaCBm8qnd" crossorigin="anonymous">
    <link rel="stylesheet" href="css/main.css">

  </head>

here is just above the closing body tag

    <!-- jQuery first, then bootstrap js -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.2/js/bootstrap.min.js" integrity="sha384-vZ2WRJMwsjRMW/8U7i6PWi6AlO1L79snBrmgiDpgIWJ82z8eA5lenwvxbMV1PAh7" crossorigin="anonymous"></script>