0

Questions I've already looked at:
Bootstrap JavaScript not working
twitter bootstrap drop down suddenly not working
Complete list of reasons why a css file might not be working

My Bootstrap styles seem to have suddenly stopped being applied, resulting in pages that look something like this. I'm using the layout generated by ASP.NET MVC 5, so there should be a navbar at the top, among other things. Ignore the red banner, the button doesn't show on that page anyway.

Nothing looks amiss in the dev tools -- console, network, etc. all look normal with no errors. All the files are loaded, and changing their order changes nothing. All of the .css and .js files are loaded from the local file system. I even reverted to a commit from yesterday, when the site was working fine, but the site still displays incorrectly.

I've tried turning it off and on again, now I'm out of ideas.

Edit: Same results, no matter the browser. I'm at a total loss here.

Code, as requested: 

<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Log in</title>
        <link href="/Content/bootstrap.css" rel="stylesheet"/>
        <link href="/Content/Site.css" rel="stylesheet"/>
        <link href="/Content/css/select2.css" rel="stylesheet"/>
        <link href="/Content/alertify.css" rel="stylesheet"/>

        <script src="/Scripts/modernizr-2.6.2.js"></script>
        <script src="/Scripts/modernizr-2.8.3.js"></script>

        <script src="/Scripts/jquery-3.1.1.js"></script>
        <script src="/Scripts/bootstrap.js"></script>
        <script src="/Scripts/respond.js"></script>
        <script src="/Scripts/alertify.js"></script>
        <script src="/Scripts/Custom/JavaScript/utility.js"></script>
        <script src="/Scripts/jquery.mask.js"></script>
        <script src="/Scripts/autosize.js"></script>
        <script src="/Scripts/Custom/register-modal.js"></script>

        <script>
            //<!-- Google Analytics -->
            (function (i, s, o, g, r, a, m) {
                i['GoogleAnalyticsObject'] = r; i[r] = i[r] || function () {
                    (i[r].q = i[r].q || []).push(arguments)
                }, i[r].l = 1 * new Date(); a = s.createElement(o),
                    m = s.getElementsByTagName(o)[0]; a.async = 1; a.src = g; m.parentNode.insertBefore(a, m)
            })(window, document, 'script', 'https://www.google-analytics.com/analytics.js', 'ga');

            ga('create', 'shh', 'none');

            ga('send', 'pageview');
            //<!-- End Google Analytics -->
        </script>

        <!-- FontAwesome -->
        <link href="/Content/FontAwesome/fontawesome-all.css" rel="stylesheet" />
    </head>
</html>
Sinjai
  • 1,085
  • 1
  • 15
  • 34
  • Are you using the CDN links? – fortunee Feb 02 '18 at 22:42
  • @FortuneEkeruo No, files are being served locally. Good point, updated the question details. – Sinjai Feb 02 '18 at 22:46
  • Does the console emit any errors? – roberrrt-s Feb 02 '18 at 23:01
  • Best answers to this would be, try on a different browser, do a hard refresh, try on a different computer till it works or throws an error at ya. – fortunee Feb 02 '18 at 23:04
  • @Roberrrt No, I'll be more explicit in the details. – Sinjai Feb 02 '18 at 23:06
  • Someone has overwritten your Bootstrap 4 css with Bootstrap 3 css. That's the most likely reason for this big "mystery". – WebDevBooster Feb 02 '18 at 23:14
  • @WebDevBooster I wish. I'm the sole contributor, so not only am I sure that it was functional yesterday, but I know the files haven't been changed in months. – Sinjai Feb 02 '18 at 23:29
  • @Sinjai I'm just telling you what's the most likely reason based on what I'm seeing in the screenshot. It's up to you to double check the actual files on the server. – WebDevBooster Feb 02 '18 at 23:33
  • @WebDevBooster I understand, and I appreciate it. I actually just so happened to have checked that before posting this question. It must be a configuration thing, if reverting code doesn't fix it, right? In IIS or something? Not that I've touched the web server... – Sinjai Feb 02 '18 at 23:49
  • Well, if it's not a browser cache thing, then someone or something must have changed something about your files. Just start from the fact that at least one of the files MUST be different than it was when it was working. Start from that fact and track down what's changed. How it was changed or who has changed it, is largely irrelevant for now. – WebDevBooster Feb 02 '18 at 23:53
  • Please post some of your layout code that is related with bootstrap. It will help us to get to the issue. Your CSS is being applied as I can see it in the image. It is some js issue. – vivek Feb 03 '18 at 06:08
  • @vivek I'm not sure how much Bootstrap does with pure CSS vs CSS+JS. Rows (col-md-6, etc.), for instance, aren't working. I added my code, but no matter how much I play with it, I can't get the styles to come back. It broke without me touching anything, too. I suppose the next step is deleting the IIS settings and creating a new "site". – Sinjai Feb 06 '18 at 08:13

2 Answers2

2

change the <nav> tag in layout file with this

<nav class="navbar navbar-expand-lg navbar-dark bg-primary">
        <a class="navbar-brand" href="#">Navbar</a>
        <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
        </button>

        <div class="collapse navbar-collapse" id="navbarColor01">
            <ul class="navbar-nav mr-auto">
                <li class="nav-item active">
                    <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
                </li>

                <li class="nav-item">
                    <a class="nav-link" href="#">About</a>
                </li>
            </ul>
            <form class="form-inline my-2 my-lg-0">
                <input class="form-control mr-sm-2" type="text" placeholder="Search">
                <button class="btn btn-secondary my-2 my-sm-0" type="submit">Search</button>
            </form>
        </div>
    </nav>
Saad Qais
  • 592
  • 5
  • 8
0

tl;dr OP updated from Bootstrap 3 -> 4 without updating HTML.

A week ago, I updated to Bootstrap v4(a?) via NuGet, without paying attention to the change in major version number. Apparently my cache didn't get cleared until a week later (when I asked this question), so I had forgotten the update even happened.

Bootstrap 4 is a major rework, so the bulk of my Bootstrap HTML became invalid.

Reverting Bootstrap fixes everything.

Sinjai
  • 1,085
  • 1
  • 15
  • 34