Bootstrap Navbar appears as vertical list...?

I had a similar problem using bootstrap v4. The previous answers code worked well for me but just wanted to clarify that the part that made the vertical navbar horizontal was to use navbar-expand-lg in the main div tag.

<nav class="navbar navbar-expand-lg">

Changing the lg to another size (md, sm or xs) is also helpful depending on your screen sizing preferences.

Hope this helps

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.

In my case I was trying some codes I found on internet based on Bootstrap version 3 but my app was based on bootstrap version 4. There exist important differences between the two versions (see here).

The following code based on v4 works for me :

<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>

  <div class="collapse navbar-collapse" id="navbarSupportedContent">
    <ul class="navbar-nav mr-auto">
      <li class="nav-item active">
        <a class="nav-link" href="#">Home <span class="sr-only">(current)</span></a>
      </li>
      <li class="nav-item">
        <a class="nav-link" href="#">Link</a>
      </li>
      <li class="nav-item dropdown">
        <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown
        </a>
        <div class="dropdown-menu" aria-labelledby="navbarDropdown">
          <a class="dropdown-item" href="#">Action</a>
          <a class="dropdown-item" href="#">Another action</a>
          <div class="dropdown-divider"></div>
          <a class="dropdown-item" href="#">Something else here</a>
        </div>
      </li>
      <li class="nav-item">
        <a class="nav-link disabled" href="#">Disabled</a>
      </li>
    </ul>
    <form class="form-inline my-2 my-lg-0">
      <input class="form-control mr-sm-2" type="search" placeholder="Search" aria-label="Search">
      <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Search</button>
    </form>
  </div>
</nav>

The official documentation can be found here.

If you want your navbar to be always horizontal just make it like this:

<nav class="navbar navbar-expand">

Using navbar-expand-lg|md|sm will make it always break at some point to vertical position.