Help me understand use of bootstrap.min.css/etc in head tag [Solved]

1

I created a page in CodePen and it worked great, but then when I put it onto the web and had to add my own links for bootstrap.min.css, etc., several formatting things stopped working. I was able to fix them by rearranging things a bit, but I don’t really understand what’s happening in all this.

Here’s what made it work - but a lot of it is still commented out. Is there an order I’m supposed to use, or something else I’m supposed to include or not include within the head tags? Thanks for your help!

<!--  <meta name="viewport" content="width=device-width, initial-scale=1.0"> -->
  
 <link href="https://fonts.googleapis.com/css?family=Julius+Sans+One|Open+Sans" rel="stylesheet">
  
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

<!--  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>  OR       
       "https://code.jquery.com/jquery-2.2.4.min.js" -->
  
<!--  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> -->
  
<link rel="stylesheet" type="text/css" href="styles.css">
2

I think you should uncomment all and check it then.

4

Great - it works now! Thanks so much!

5

Useful post for the order.
Although I put them in you made it clearer why specific order is needed…thanks :thumbsup: