CODEWITHSUNDEEP
csshtmltwitter-bootstrapconfiguration
smeeb
smeeb

Reputation: 29537

Have I misconfigured Twitter Bootstrap?

My project directory structure:

myapp/
    index.html
    jquery-2.1.1.js
    css/
        bootstrap.min.css
    img/
        *
    js/
        bootstrap.min.js

My index.html page:

<!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.0">
    <title>First Bootstrap</title>

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

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[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>
<body>
    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <script src="jquery-2.1.1.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

When I open this in any browser I see:

enter image description here

But my <navbar> element was literally cut-n-pasted from W3Schools where it looks like this:

enter image description here

So:

  1. Have I misconfigured Bootstrap somehow? If so, where did I go wrong?
  2. I want to make sure that my app is responsive; have I configured bootstrap-responsive.css correctly? Here I'm confused because I don't have an assets directory anywhere in my project...

Upvotes: 0

Views: 48

Answers (1)

DavidG
DavidG

Reputation: 118987

This is working fine as per the snippet below. Note that I am referencing both jQuery and Bootstrap from CDN. This is the recommended way to do it as it can make your website load a little faster.

Not sure what the bootstrap-responsive.css file is though, but it's certainly not needed.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>



    <nav class="navbar navbar-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="#">WebSiteName</a>
            </div>
            <div>
                <ul class="nav navbar-nav">
                    <li class="active"><a href="#">Home</a></li>
                    <li><a href="#">Page 1</a></li>
                    <li><a href="#">Page 2</a></li>
                    <li><a href="#">Page 3</a></li>
                </ul>
            </div>
        </div>
    </nav>

Upvotes: 2

Related Questions