Search code examples
htmlcsstwitter-bootstrapnavbar

Bootstrap Navbar appears as vertical list...?

So I'm following a tutorial online (http://www.sitepoint.com/twitter-bootstrap-tutorial-handling-complex-designs/) and following the code exactly, but for some reason, my navbar is not appearing the way it should be. My friend (who's way more experienced with web dev) took a quick look at the code and couldn't figure out what was wrong. So I thought I'd post my problem here.

html code (left), actual page (right)

I'll also show you my working directory (just in case you're wondering if the files are all in the same directory):

enter image description here

Here's the code in case you want to try it yourself

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>My bootstrap</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>
<body>

    <div class="container">
        <h1><a href="#">Bootstrap Site</a></h1>
        <div class="navbar">
            <div class="navbar-inner">
                <div class="container">
                    <ul class="nav">
                        <li class="active"><a href="#">Home</a></li>
                        <li><a href="#">Projects</a></li>
                        <li><a href="#">Services</a></li>
                        <li><a href="#">Downloads</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                    </ul>
                </div>
            </div>
        </div>


    </div>

    <script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
    <script src="js/bootstrap.js"></script>
</body>

Solution

  • I'm asuming you are using the latest Bootstrap.

    You have to add navbar-defaultto your <div class="navbar"> and navbar-nav to your <ul class="nav">.

    Which gives you the following markup.

    <div class="container">
  <h1><a href="#">Bootstrap Site</a></h1>
  <div class="navbar navbar-default">
    <div class="navbar-inner">
      <div class="container">
        <ul class="nav navbar-nav">
          <li class="active"><a href="#">Home</a></li>
           <li><a href="#">Projects</a></li>
           <li><a href="#">Services</a></li>
           <li><a href="#">Downloads</a></li>
           <li><a href="#">About</a></li>
           <li><a href="#">Contact</a></li>
       </ul>
    </div>
 </div>


    Working Example

    For future problems, try reading the official Bootstrap Docs before asking here. They explained everything very detailed.

    BT Navbar

    I guess your problem is, that the sitepoint tutorial uses an older Bootstrap Version, than the one you downloaded and use.