Bootstrap Navbar appears as vertical list...?

css, html, navbar, twitter-bootstrap

Solution

I'm asuming you are using the latest Bootstrap.

You have to add `navbar-default`to 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.

Problem

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. I'll also show you my working directory (just in case you're wondering if the files are all in the same directory): 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> ```

Original source