WF5. Express: HowTo Add Bootstrap

Updated: 2016-06-05

This HowTo part of a series starting with Mean stack: Preparing workflow on Windows.

It consist of notes taken from Chapter 3 in “Getting Mean With Mongo, Express, Angular, and Node“ about adding Bootstrap styling to Express.

WF is short for Workflow meaning a manual process in this context.

WF5. Express: HowTo Add Bootstrap

Express by default delivers almost no styling in .\public\stylesheets\style.css.

So it is nice to get started with bootstrap


  • ST3 – ctrl-alt-n “public\javascripts\jquery.min.js” //Create and opens new file
  • ST3 -ctrl-shift-p “fetf” – enter – jquery – enter //Download content into file
  • ST3 -ctrl-shift-p “fetp” – enter – Bootstrap – “\public\bootstrap”
  • ST3 -ctrl-shift-p “fetp” – enter – Bootstrap_Amelia – “\public\bootstrap\css”

Now you got jQuery, bootstrap and the amelia theme downloaded.


  • ST3 – ctrl-p “layoj” – enter //Opens .\app_server\views\layout.jade
  • Add the missing parts: meta, link, script:
    meta(name='viewport', content='width=device-width, initial-scale=1.0')
    title= title
    link(rel='stylesheet', href='/bootstrap/css/amelia.bootstrap.css')
    link(rel='stylesheet', href='/stylesheets/style.css')
    block content

Now you got


The End.

Leave a Reply

Please log in using one of these methods to post your comment: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: