Why are my Twitter Bootstrap navbar styles not applying?

Question

Some background -I am making a rails app (4.0). Using BS3, bootstrap.css and bootstrap-theme.css are both in my project's stylesheets directory, as well as bootstrap.js in my javascripts directory. Other bootstrap styles work display just fine, such as .btn-group, .btn-primary, etc. Here is a navbar I am trying to create (HAML):

.navbar.navbar-fixed-top
    .navbar-inner
        .container
            %a.brand{:href => '#'} Site Name
            %ul.nav
                %li.active
                    %a{:href => '#'} Home
                %li
                    %a{:href => '#'} Link 1
                %li
                    %a{:href => '#'} Link 2

And here is how it looks, vertically stacked instead of horizontal, as well as the 'brand' missing its styles: http://jsfiddle.net/JLt9u/

How do I make it horizontal, as seen on the site? Am I simply using outdated class names? I've looked at all sorts of other questions on SO related to this and none seem to have the answer. Any help would be appreciated!

Answer 1

You are using old (2.x) markup with new styles. Proper markup, as taken from Bootstrap docs :

<nav class="navbar navbar-default navbar-fixed-top">
  <ul class="nav navbar-nav">
    <li class="active"><a href="#">Home</a></li>
    <li><a href="#">Link 1</a></li>
    <li><a href="#">Link 2</a></li>
  </ul>
</nav>

If you are migrating from 2.x to 3.0 there is a docs section for that .