Jade/Bootstrap + Nodejs: Grid rendering columns incorrectly

Question

New at using Jade/Bootstrap and trying to apply the grid system in a nodejs/express set up. My intended page has a top bar, a page header below it, and then two columns below that. I read the html examples and then translated the ideas to jade. The Jade code below vertically stacks page-header, page content, and secondary page content (see index.jade). What was expected is that the latter two would be side-by-side. So far: all css and script files are being loaded properly as seen using 'nodemon', I've verified indentation in Jade, I've read through various Bootstrap documentation, and looked for similar problems here in Stack. The rendering actually looks like its being formatted for a small screen. What am I doing wrong?

layout.jade

doctype 5
html
  head
    title= title
    link(rel='stylesheet', type='text/css', href='lib/bootstrap/css/bootstrap.css')
    link(rel='stylesheet',  type='text/css', href='stylesheets/custom.css')
    link(rel='stylesheet',  type='text/css', href='stylesheets/style.css')

    script(type='text/javascript', src='lib/jquery/jquery-1.10.2.min.js')
    script(type='text/javascript', src='lib/bootstrap/js/bootstrap.min.js')
  body

    block content

index.jade

extends layout
block content
    div.topbar
        div.fill
            div.container
                a.brand(href='#') #{title}
                ul.nav
                    li.active
                        a(href='#') Home
                    li
                        a(href='#about') About
                    li
                        a(href='#contact') Contact
                form.pull-right(method="post", id="loginForm")
                    input.input-small(id="username", type="text", name="User", placeholder="Username")
                    input.input-small(id="password", type="password", name="Password", placeholder="Password")
                    input.btn.primary(type="submit", value="Sign In")
                p#loginPrompt.pull-right.login-prompt
    div.container
        div.content
            div.page-header
                h1 Main Page
                small Welcome to #{title}
            div.row
                div.span4 
                    h2 Page Content
                div.span4
                    h3 Secondary Content
        div.footer
            p © test 2013

Answer 1

Bootstrap 3 made some changes that renamed some key classes, including the span classes, so you'll need to use col- instead, as in col-md-4:

div.row
    div.col-md-4
        h2 Page Content
    div.col-md-4
        h3 Secondary Content

or even something like this, if you want it to be one column for phones, and two for others:

div.row
    div.col-xs-12.col-sm-4
        h2 Page Content
    div.col-xs-12.col-sm-4
        h3 Secondary Content

SO post on version differences.