Why is the bootstrap navbar not working?

Question

im starting study bootstrap and im doing a basic example with a nav bar. I went to bootstrap documentation for navbar here -> "http://getbootstrap.com/2.3.2/components.html#navbar" and i copy the code to my project, but the menu appears all unformatted. What could be wrong?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Untitled Document</title>
    <link rel="stylesheet" href="css/template.css" />
    <link rel="stylesheet" href="css/bootstrap-theme.min.css" />
    <link rel="stylesheet" href="css/bootstrap.min.css" />
    <link rel="stylesheet" href="css/bootstrap.css" />
    </head>

    <body>
        <div class="container">
            <div class="row" id="topo">
                <div class="span5">
                    <a href="index.html" title="Index">
                        <img src="logo.png" alt="Logo"/>
                    </a>
                </div>
            </div><!--end top-->

            <div class="row" id="navegation">
                <div class="span12">
                    <div class="navbar">
                        <div class="navbar-inner">
                            <a class="brand" href="#">Title</a>
                            <ul class="nav">
                              <li><a href="#">Link</a></li>
                              <li><a href="#">Link</a></li>
                            </ul>
                         </div>
                   </div>
             </div>
          </div><!--end navegation-->
    </div><!--end container-->


    <script src="js/bootstrap.min.js"></script>

    </body>
    </html>

what im getting is: enter image description here

Hopefully this is a stupid question, but did you download Bootstrap and place it in the css folder in your project? — Alpha Codemonkey
– Alpha Codemonkey, Commented Feb 25, 2014 at 23:43
Yes...sure! Im starting studying boostrap but i already know the basics at least of html & css :) — OzzC
– OzzC, Commented Feb 25, 2014 at 23:47
You are reading the documentation for Bootstrap version 2. Are you sure the files you downloaded are for the same version and not version 3? The navbar is structured differently in version 3. — davidpauljunior
– davidpauljunior, Commented Feb 26, 2014 at 0:12
Thank you very much, you were right, i download the last version of boostrap but the example i get from the bootstrap site was for the version 2. Thanks for help one more time :) — OzzC
– OzzC, Commented Feb 26, 2014 at 0:16

davidpauljunior · Accepted Answer · 2014-02-26 00:15:19Z

2

I think you have downloaded Bootstrap 3 files but are reading Bootstrap 2 documentation.

Your code with Bootstrap 2 files works fine: http://jsbin.com/vazesuto/1/edit

But with Bootstrap 3 files it produces the error you have shown: http://jsbin.com/vazesuto/3/edit

Try reading the navbar documentation for Bootstrap 3 instead: http://getbootstrap.com/components/#navbar

answered Feb 26, 2014 at 0:15

davidpauljunior

8,3686 gold badges33 silver badges54 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 10:26:11Z

1

How did you copy the links to bootstrap? Cause in that sample code it's assuming you have it somewhere in your computer, instead of linking directly to it, like the JQuery script source is doing. If you haven't, you need to download bootstrap first, and then write the appropiate path (depending on where you're placing it on your computer).

Edit: After upgrading to the latest version of bootstrap, please make sure you're following what's written on this answer, as the OP seemed to be having the same problem as you.

edited May 23, 2017 at 10:26

CommunityBot

11 silver badge

answered Feb 25, 2014 at 23:42

Ana Ameer

6811 gold badge13 silver badges30 bronze badges

1 Comment

OzzC Over a year ago

Thanks for your answer Ana. I already download the bootstrap files and Im call the files with "href" in the right location!

Collectives™ on Stack Overflow

Why is the bootstrap navbar not working?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related