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 4 Basics (Retired) Getting to Know Bootstrap 4 Creating a Simple Page

Rene Diaz
Rene Diaz
560 Points

I pasted http://getbootstrap.com/getting-started/#template save and view but nothing shows.

As stated I pasted the following:

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- The above 3 meta tags must come first in the head; any other head content must come after these tags --> <title>Bootstrap 101 Template</title>

<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">

</head> <body> <h1>Hello, world!</h1>

<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>

</body> </html>

Even switched up the original title <title>Bootstrap 101 Template</title> for <title>Full Stack Conf</title>

Still nothing shows? And this is just step one. What's going on? Thanks for any help.

9 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points

This should work and display content.

Are you sure you've saved your workspace if this is what you're using?

It could be any number of any simple things like, previewing the wrong file or file with your code on without the right file extension?

Good luck, and let me know if it's still not fixed :)

Rene Diaz
Rene Diaz
560 Points

I simply copied and pasted the html from http://getbootstrap.com/getting-started/#template then clicked Command + S to save then cliced on the view icon on the top right of the workspace window.

Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

So on workspaces, did you paste it into a HTML file that you created, such as project.html?

If you did, it could be a bug in Workspaces stopping you from getting your HTML displayed.

Rene Diaz
Rene Diaz
560 Points

No I pasted it into the indext.html window

Rene Diaz
Rene Diaz
560 Points

If you don't hear right back from me it's because It's 3am and I was about to finally call it a night.

Hi Rene,

Taking a look at your code. The issue would appear that you are trying to look for assets that most likely do not exist in workspace.

<link href="css/bootstrap.min.css" rel="stylesheet">

This is looking in a folder called css for bootstrap.min.css.

Try using the CDN version.

<!-- Latest compiled and minified CSS --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<!-- Optional theme --> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css" integrity="sha384-fLW2N01lMqjakBkx3l/M9EahuwpSfeNvV63J5ezn3uZzapT0u7EYsXMjQV+0En5r" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript --> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>

You are welcome Rene,

Do you have this live anywhere or just trying it on a workspace? I can setup a working demo of it once I get home.

You are welcome Rene,

Do you have this live anywhere or just trying it on a workspace? I can setup a working demo of it once I get home.

Rene Diaz
Rene Diaz
560 Points

Hi Mark, Thanks for your help. I am completely new to coding (hence why I'm taking the course) Would you be kind enough to past all the code I should be using so that I do not make any errors.

Thank you again for your time and help. René

Rene Diaz
Rene Diaz
560 Points

These terminologies are all new to me. I am using the 'workspace' provided in the course. Thanks again.

Zach Robinson
Zach Robinson
8,862 Points

Hi Rene, it looks like you ran into the same problem that I ran into: the default Bootstrap version that you'll get when you go to their website is v 3.3.6, which is NOT the same version Guil is using in the video - He is using the newest version, the v4 alpha version. You can access that site here.

The "Getting Started" template that you should be using is actually this one:

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags always come first -->
    <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">

    <!-- 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">
  </head>
  <body>
    <h1>Hello, world!</h1>

    <!-- 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>
  </body>
</html>

Once you've started with this, you should be good to go for this lesson. Hope that helps!

While you can use that code. I do not advise using any alpha/beta version if trying to learn. You could have issues which would only make things seem even more complicated. 3.3.6 is the CURRENT version to use.

Rene Diaz
Rene Diaz
560 Points

I had pasted what seemed to be the latest code. Would be great If someone could post the latest working code here so I can copy and past it.

Zac has pasted the right code. Use this one to carry on with the video.