mufc
mufc

Reputation: 715

Why isn't bootstrap linking to my HTML

Very beginner code here. But my bootstrap isn't linking to my html. I am trying to create a nav bar where the four list elements are pulled so that they are on the same row.

<! DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="main.css">
</head>

    <body>
        <div class="nav">
            <div class="container">
                <ul class="pull-left">
                    <li>ONE</li>
                    <li>TWO</li>
                </ul>

                <ul class="pull-right">
                    <li>LOG IN</li>
                    <li>HELP</li>
                </ul>
            </div> <!--End nav container-->

        </div> <!--End nav-->

    </body>
</html>

As of right now the list is displaying at the default way HTML displays lists. the second link to a main.css is just a blank file I am not doing anything in it. These files are structured as such:

Documents/Web

There are both in my web folder.

Upvotes: 0

Views: 745

Answers (1)

SlightlyCuban
SlightlyCuban

Reputation: 3255

Leaving out the protocol tells the browser to fetch the link over the same protocol the webpage is currently being viewed in (http://www.paulirish.com/2010/the-protocol-relative-url/).

You're viewing your HTML locally (over file://), so your browser is interpreting:

href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"

As:

href="file://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css"

Which I'm pretty sure doesn't exist on your computer.

Just add the http: protocol for local development, or download bootstrap.min.css to your Documents/Web and change the href to a relative path.

Upvotes: 4

Related Questions