Twitter Bootstrap Question posted in

Bootstrap styles suddenly stopped working-Twitter bootstrap

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>
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    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.


  2. 0

    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>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search