CODEWITHSUNDEEP
node.jstwitter-bootstrapexpresspug
mo0206
mo0206

Reputation: 801

Bootstrap rendering a blank white page - node js- express - jade

I am trying to get the bootstrap working for Node.js with Jade template engine.

It just renders a blank white page when I try to run the index.jade file.

div.topbar
  div.fill
    div.container
      a.brand(href='#') #{title}
      ul.nav

      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

when i run this I get something like this.

enter image description here

but when I try to include extends layout (see image below)where I have the bootstrap styles defined. I get a blank page. enter image description here

Can anyone please explain me how to set this bootstrap working. I have the bottstrap css file in stylesheets folder under public and the js file under javascripts in public folder.

layout.jade

doctype
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/bootstrap-responsive.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    script(src='http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js')
    script(src='/javascripts/bootstrap.min.js')
  body
    block content

Upvotes: 1

Views: 1165

Answers (2)

roman
roman

Reputation: 547

Make sure you include block content like so:

extends ./layout.jade
block content
    div.topbar
      div.fill
        div.container
          a.brand(href='#') #{title}
          ul.nav

          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

I tested that this works with the layout.jade that you showed.

Upvotes: 1

Dino Bic Boi
Dino Bic Boi

Reputation: 49

Simple mistake when you are trying to reference your jade layout. Use extends./layout.jade if that does not work here is a link for a similar problem Extending Jade Differently

Upvotes: 0

Related Questions