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 Iftode Daniel
.a{fill-rule:evenodd;}techdegree
Iftode Daniel
Front End Web Development Techdegree Student 14,093 Points

why it doesn't work

so i'm fallowing "bootstrap 4 basics" and i am at the bootstrap grid video and did the grid just as instructed in the lesson and instead of spliting the screen in 3 parts it all stak's one on top of each other like blocks 

 <!doctype html>
<!doctype html>
<html lang="en">
    <head>
        <title>Bootstrap</title>
        <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">                                     
        <link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" integrity="sha384-XXXXXXXX" crossorigin="anonymous">   
    </head>
    <body>
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <p>Sed molestie dignissim auctor. Vivamus a tempus felis, non convallis eros. Morbi efficitur, enim vitae elementum facilisis, turpis nisl porttitor velit, eget rutrum metus justo nec nulla. Etiam ac mattis justo. Fusce vel dignissim augue. Maecenas suscipit, tortor sit amet bibendum accumsan, tellus enim tempus magna, ut tincidunt nisl nisl aliquam enim. Interdum et malesuada fames ac ante ipsum primis in faucibus. Maecenas rutrum dui at neque porta tempor. Duis quis rhoncus est. Duis sagittis id odio non semper. Curabitur ut odio in elit efficitur cursus ut nec tortor.</p>
                </div>
                <div class="col-sm-4">
                    thia should be a 3 column row
                </div>
                <div class="col-sm-4">
                    this doesnt seem to work ....i need to find out why 
                </div>
             </div>
        </div>
    <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>
    </body>
</html>
Nils Garland
Nils Garland
18,416 Points

Can you tell us where the problem is located and what is wrong. Also make a code block so we can se the code a bit better. :)

2 Answers

Idan Melamed
Idan Melamed
16,285 Points

Hi,

I think the problem is that the link to the bootstrap css is not working.

Try replacing this:

<link rel="stylesheet" href="https://cdn.rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap.css" integrity="sha384-XXXXXXXX" crossorigin="anonymous">

With this:

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

I took the above link from the quick start guide for bootstrap 4

Iftode Daniel
seal-mask
.a{fill-rule:evenodd;}techdegree
Iftode Daniel
Front End Web Development Techdegree Student 14,093 Points
Iftode Daniel
.a{fill-rule:evenodd;}techdegree
Iftode Daniel
Front End Web Development Techdegree Student 14,093 Points

yea ......i figured it out myself eventually :D tried the official bootstrap 3 css cdn and made it work i know bootstrap 4 is still in alpha and it is a lot of work for the developers involved but us noob's ( myself especially) cant wait for the stable version to come out :D

thx for the fast reply idan melamed

Idan Melamed
Idan Melamed
16,285 Points

Great to hear that you figured it your yourself. :-)