CODEWITHSUNDEEP
node.jstwitter-bootstrappug
kim bellinger
kim bellinger

Reputation: 60

Jade/Bootstrap + Nodejs: Grid rendering columns incorrectly

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

Upvotes: 3

Views: 7077

Answers (2)

Mizanur Rahman
Mizanur Rahman

Reputation: 272

You can try this:

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

Upvotes: 0

MikeSmithDev
MikeSmithDev

Reputation: 15797

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.

Upvotes: 2

Related Questions