CODEWITHSUNDEEP
csstwitter-bootstrappug
Dirk
Dirk

Reputation: 3221

Advice sleuthing down why Bootstrap CSS not working in Express

I'm learning Express.js, and have included Bootstrap in my layout.jade. Problem is, the styles are not showing up. Any advice how to chase this problem to ground appreciated.

Here's layout.jade:

doctype html
html(lang='en')
  head
    title=MiniApp
    link(rel='stylesheet', ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css")
    link(rel='stylesheet', ref="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css")
  body
    block content
    script(src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js')

And here's the first part of index.jade, the only other Jade file (I just converted an example Bootstrap file to Jade.):

extends layout

block content
  nav.navbar.navbar-inverse.navbar-fixed-top
    div.container
      button.navbar-toggle.collapsed(data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar")
        span.sr-only Toggle navigation
  ...etc.

The main thing is, it's inside a container div, but the page still renders without any styles. Why?

Some other solutions have suggested Bower, but I'm not using Bower.

Upvotes: 1

Views: 461

Answers (1)

Daemedeor
Daemedeor

Reputation: 1007

instead of ref, you're supposed to use href

link(rel='stylesheet', href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap-theme.min.css")

Upvotes: 2

Related Questions