CODEWITHSUNDEEP
twitter-bootstrapnavbar
James Parsons
James Parsons

Reputation: 6057

Bootstrap does not display `.nav.nav-tabs` correctly

I am working on a express site. To prototype my UI, I am using jade, and unfortunately, it is a little awkward for me. When I look at the site, I see this:

Not displaying as expexted

I want them to look like these: http://getbootstrap.com/components/#nav-tabs

My jade is here:

//- views/layout.jade

doctype html
html(lang='en')
    head
        meta(charset='UTF-8')
        block BLOCK_STYLES
            link(rel='stylesheet', type='text/css', href='/style.css')
            link(rel='stylesheet', type='text/css', href='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css')
        title= title ? title : 'Exaid'
    body
        #header
            #nav.nav.nav-tabs
                - var nav = [{ text: 'Home', url: '/' }, { text: 'About', url: '/about' }, { text: 'Contact', url: '/contact' }, { text: 'Connect', url: '/auth' }];
                for button in nav
                    a(href=button.url)
                        li #{button.text}
            #logo
                a(href='/') Exaid
        #main
            block BLOCK_MAIN
        #footer
        block BLOCK_SCRIPTS
            // accidentally deleted jquery line. sorry bout this CDN
            script(type='text/javascript', src='//code.jquery.com/jquery-2.1.3.min.js')
            script(type='text/javascript', src='//rawgit.com/julianshapiro/velocity/master/velocity.min.js')
            script(type='text/javascript', src='/script.js')
            script(type='text/javascript', src='//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js')

I've checked for errors, but the only one is related to a non-related, empty script file. Am I doing something wrong?

Upvotes: 0

Views: 134

Answers (1)

Wild Beard
Wild Beard

Reputation: 2927

Well you never setup the actual <ul> that will contain the nav.

ul.nav.nav-tabs
  li: a.active(href="link") Link Text
  li: a(href="link") Link Text

Is the easiest way to go about it.

Upvotes: 1

Related Questions