how to solve "style sheet could not be loaded" in Bootstrap

Question

I should at least get grey color navbar but I am getting red sign error in the bottom "Stylesheet could not be loaded". Even trying to remove one css at a time but nothing help.

I am also getting this error in console "ReferenceError: Popper is not defined". Even I am not getting auto suggest in sublime related to bootstrap classes.

<!DOCTYPE html>
<html>
    <head>
        <!-- Website Title & Description for Search Engine purposes -->
        <title></title>
        <meta charset="UTF-8" name="description" content="">

        <!-- Mobile viewport optimized -->
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

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

        <!-- Custom CSS -->
        <link href="includes/css/styles.css" rel="stylesheet">

        <!-- Include Modernizr in the head, before any other Javascript -->
        <script src="includes/js/modernizr-2.6.2.min.js"></script>
    </head>
    <body>

    <div class="container" id="main">

        <div class="navbar navbar-fixed-top">
            <div class="container">
                <a class="navbar-brand" href="/" src="/images/logo.png" alt="your logo"/>
            </div><!-- end container-->
        </div><!-- end navbar-->

        <div class="carousel slide" id="myCarousel">

        </div><!-- end Carousel -->

        <div class="row" id="bigCallout">

        </div><!-- end bigCallout-->

        <div class="row" id="featuresHeading">

        </div><!-- end featuresHeading-->

        <div class="row" id="features">

        </div><!-- end features-->

        <div class="row" id="moreInfo">

        </div><!-- end moreInfo-->

        <div class="row" id="moreCourses">
        </div> <!-- end moreCourses -->

    </div><!--end container -->

    <footer>
    </footer>

    <!-- All Javascript at the bottom of the page for faster page loading -->

    <!-- First try for the online version of jQuery-->
    <script src="http://code.jquery.com/jquery.js"></script>

    <!-- If no online access, fallback to our hardcoded version of jQuery -->
    <script>window.jQuery || document.write('<script src="includes/js/jquery-1.8.2.min.js"><\/script>')</script>

    <!-- Bootstrap JS -->
    <script src="bootstrap/js/bootstrap.min.js"></script>

    <!-- Custom JS -->
    <script src="includes/js/script.js"></script>

    </body>
</html>

it is display nothing.i used all default files & custom css has only headings while the entire index.html code is already in the main post. — SSangeet, Nov 28 '17 at 06:42
I removed all relatives path and changes jquery file from http to htttps; No error; https://jsfiddle.net/p60nb6eo/ — Rajkumar Somasundaram, Nov 28 '17 at 06:44
make sure the path to your bootstrap file is correct. If the bootstrap folder is in your current working directory, then use `./bootstrap/css/bootstrap.css` and also include bootstrap.js - `./bootstrap/js/bootstrap.js` — uttejh, Nov 28 '17 at 06:46
@uttejh yes my css & js files are in a folder & that folder is in same folder where index.html(file on which i am working)...surprisingly when i write path with ./ it is still showing files in view source & when i am not it is still showing...so irritating as i am starting programming after a gap of a year & first program i am trying ended with error which i am never faced. — SSangeet, Dec 11 '17 at 10:27
@RajkumarSomasundaram not working for me after that i added meta charset UTF-8 then it removed one error from console but still showing nothing & showing ReferenceError: Popper is not defined error in console — SSangeet, Dec 11 '17 at 10:34

score 2 · Answer 1 · answered Nov 28 '17 at 06:43

2

From Bootstrap site

Many of our components require the use of JavaScript to function. Specifically, they require jQuery, Popper.js, and our own JavaScript plugins. Place the following s near the end of your pages, right before the closing tag, to enable them. jQuery must come first, then Popper.js, and then our JavaScript plugins.

<script src="path/jquery"></script>
<script src="path/popper"></script>
<script src="path/bootstrap"></script>

It seems you need to add popper.js in your application.Note the order of files from the above snippet

answered Nov 28 '17 at 06:43

brk

48,835
10
56
78

but popper js is not included into the tutorial from which i am learning.even few years back when i did this tutorial at that time also i am not face this kind of error, – SSangeet Dec 11 '17 at 10:35
i added this line after jquery.js declaration – SSangeet Dec 11 '17 at 10:37
but ended with this error SyntaxError: export declarations may only appear at top level of a module – SSangeet Dec 11 '17 at 10:38
& i am still getting popper reference error in bootstrap.min.js. – SSangeet Dec 11 '17 at 10:39
added type ="module " which solved that syntax error but now getting again reference error for popper. – SSangeet Dec 11 '17 at 10:52

score 1 · Answer 2 · answered Apr 13 '18 at 15:30

1

I had the same problem. I was using Bootstrap 3.3.7 and this message keeps appearing all the time. I solved this by changing from jQuery 3.3.1 (the latest as of now) to jQuery 1.12.4 which is an older version. The message disappears after I made the change. Hope this helps!

Related: twitter bootstrap 3 jquery minimum version

answered Apr 13 '18 at 15:30

krismath

1,879
2
23
41

Maybe work with Jquery 3.0.0. But it's change notice to missing _transition.scss – Trần Hữu Hiền Sep 18 '20 at 06:43

score 0 · Answer 3 · answered Dec 11 '17 at 13:04

0

You can try Few things:

First and foremost - try using the CDN for bootstrap.
Try placing href before rel in the link tag.
add media="all"

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

Get back after the results.

answered Dec 11 '17 at 13:04

uttejh

184
1
14

how to solve "style sheet could not be loaded" in Bootstrap

3 Answers3