Bootstrap nav-bar are not display text as expected

Question

Im working on Node.js and want to use the nav-bar with some button and text to click and navigate the problem is that the button and text are not showing in the nav-bar ,you see them below, what am I doing wrong here ?

for the following code I use express & jade http://jade-lang.com which help you to write html page is simple way...

I want it to be like the follwoing http://getbootstrap.com/examples/jumbotron/ and instead the project name you will see tab1 & tab2 etc

Updated code

Currently the text(tab1&2) are not shown as part of the nav-bar how should I change it?

html
    head
        title= title
        link(rel="stylesheet", href="bootstrap.min.css")
        link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css')
        script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')

        nav.navbar.navbar-default(role='navigation')
           .container-fluid
               .navbar-header
                    button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
                        span.sronly
                        span.icon-bar
                        span.icon-bar
                        span.icon-bar
                   a.navbar-brand(href='/#
               #bs-example-navbar-collapse-1.collapse.navbar-collapse
                   ul.nav.navbar-nav
                       li
                           a(href='/recipes/1') Tab1
                       li
                           a(href='/recipe2') Tab3
                   body        
                   div.container
                   block content

Answer 1

Nesting elements requires you to indent properly. You can also apply a class using .class-name on the element.

html
    head
        title= title
        link(rel="stylesheet", href="bootstrap.min.css")
        link(rel='stylesheet', href='//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.2.0/css/bootstrap-theme.min.css')
        script(src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js')
    body
        nav.navbar.navbar-default(role='navigation')
           .container-fluid
               .navbar-header
                    button.navbar-toggle(data-toggle='collapse', data-target='#bs-example-navbar-collapse-1')
                        span.sronly
                        span.icon-bar
                        span.icon-bar
                        span.icon-bar
                   a.navbar-brand(href='/#') Node Recipes
               #bs-example-navbar-collapse-1.collapse.navbar-collapse
                   ul.nav.navbar-nav
                       li
                           a(href='/recipes/bbq') Tab1
                       li
                           a(href='/recipes/bbq') Tab2