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

HTML

Posted by Laurence kite
Laurence kite
11,768 Points

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
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>
Laurence kite
Laurence kite
11,768 Points
Laurence kite
Laurence kite
11,768 Points

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