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 Jason Larkin
Jason Larkin
13,970 Points

Link to an external stylesheet not working in Bootstrap

I have used Bootstrap for years and this is the first time that I have had a problem linking to an external stylesheet. The custom.css syntax is the same as I have used in heads of other templates and custom.css is in the css folder, so I don't see the problem.

Any suggestions as to what it could be? Thanks in advance.

<!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">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../../favicon.ico">

    <title>Jumbotron template</title>



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

    <!-- Custom styles for this template -->
     <link href="css/custom.css" rel="stylesheet">


    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="../../assets/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="../../assets/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
Wayne Priestley
Wayne Priestley
19,579 Points

Hi Jason,

Could you post the code inside your head section please.

Thanks

Jason Larkin
Jason Larkin
13,970 Points

Hi Wayne, the odd thing is that it is only doing it on Jumbotron, I just did a site using Cover and everything worked perfectly. Even when I start a new site with newly downloaded Bootstrap using the Jumbotron template, it still does the same thing!

Perhaps you can figure it out.

Thanks

Wayne Priestley
Wayne Priestley
19,579 Points

Hey Jason,

Can you try a couple of things, just to see if any of them work.

With everything like it is now, what happens if you remove your custom css link and paste your css into your html? I know its messy, just want to know if it works. If it does then its not an issue between your css and the jumbotron css.

How about doing a custom build and including the jumbotron and whatever else you need, then downloading and using that instead of the template.

I take it you do have the js linked at the bottom of your page.

I'm pretty stumped to be honest, I've never heard of this type of issue with bootstrap.

3 Answers

Jason Larkin
Jason Larkin
13,970 Points

Thank you Michael, Bryan and Wayne, but I have tried all the suggestions and have come up dry. If it helps, I have tried attaching a stylesheet to all of the other templates and have been successful every time. Jumbotron seems to just be the exception for some reason. I'm going to try Wayne's suggestion of doing a custom build of the Jumbotron motif and working the problem out another day. It's not like the client will care, as long as it gets built.

Thanks again!

Jason Larkin
Jason Larkin
13,970 Points

UPDATE: I was about a third of the way through my custom build of the Jumbotron - like clone of the site and I tried it again- this time it worked so I'm currently up and running with it.

Thanks to everyone who took the time to answer.

Wayne Priestley
Wayne Priestley
19,579 Points

Glad your all sorted Jason.

Michael Aguilera
Michael Aguilera
19,379 Points
Michael Aguilera
Michael Aguilera
19,379 Points

Try using the Google dev tools to see if there are any overriding css that impede the jumbotron styling.

Bryan Lusica
Bryan Lusica
5,971 Points
Bryan Lusica
Bryan Lusica
5,971 Points

I am not sure what your problem really is... What i understand is you have a problem with css doing the same thing even it gets updated... This might be a cache problem... To ensure your site will load the updated stylesheet, i recommend using cache buster. For example 

<link href="css/custom.css?ver=1.0.1" rel="stylesheet">

. As you will notice there is a version number at the end of the file url. Just make sure that the number will change when the file gets updated..