Why won't Bootstrap work?


#1

When I preview my static portfolio page composed in sublime_text in a browser, the bootstrap works. Page looks perfect. I cannot get Bootstrap to work when I preview it from my c9 workstation. I followed the directions here without success. I have also downloaded BS to my computer and manually added all files (css, fonts, js) to same directory on c9 as my index.html file. For fun, I’ve tried it in HTML5 and Ruby workstations (adding in ‘public’ file when using Ruby workstation).
This is the portion of my < head > before < style > begins:

<head>
  <title>Title</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link href='https://fonts.googleapis.com/css?family=Amatic+SC|Ropa+Sans' rel='stylesheet' type='text/css'>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

#2

Can you share your workspace or copy the whole html file?


#3

Did you follow this note?

Note: By not including http or https before the CDN link (//maxcdn…), the link will use whichever protocol is being used by the rest of your page.

That’s the most common reason for this.


#4

I was actually able to get BS to work in both Ruby and HTML5 workstations using the following as my head-before-style ( < > ) section:

<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>title</title>
    <!-- Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href='https://fonts.googleapis.com/css?family=Amatic+SC|Ropa+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">

I did have to add the BS files to my root directory in both cases.

I also added these scripts to the end of my < body >:

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

#5

Hi @icartusacrimea, I take a guess here (and I think @bradydowling is right on spot), but you can’t load any files from HTTP when you load the page via HTTPS.

Meaning, if you load (like on c9) your static HTML page via “https://whatever-my-url.is”, you can’t load any resource (like Bootstrap, or jQuery, or…) from “http://url-to-your-cdn”. It is considered as not secure, because you established a connection with HTTPS that stops you from loading any insecure files.

And this is what you did in your first piece of code you posted - the links to the Bootstrap files are HTTP and not HTTPS. By the way, use the browser console, because your browser usually tells you when it has to block such requests.

Cheers!