Build a node.js bootstrap site in 30 minutes

Bootstrap is 'The most popular front-end framework for developing responsive, mobile first projects on the web'. In English this means it is a pile of pre-defined cool aesthetics to apply to your webpage that automatically adjust for viewing on different screen sizes to always look good.

This post shows how to build a simple website using a node.js + express and play around with some of the bootstrap styles and layouts all in half an hour.

Create a website called BootExample

First off I created a new node.js + express web app.  I am assuming you have node package manager and express/express-generator installed on your computer and so will skip instructions to install those. You may like my post: Install Node.js on Raspberry Pi which also goes for pretty much any Mac/Linux machine.

$:cd <working directory>
$:express bootexample
   create : bootexample
   create : bootexample/package.json
   create : bootexample/app.js
   create : bootexample/public
   create : bootexample/public/javascripts
   create : bootexample/public/images
   create : bootexample/public/stylesheets
   create : bootexample/public/stylesheets/style.css
   create : bootexample/routes
   create : bootexample/routes/index.js
   create : bootexample/routes/users.js
   create : bootexample/views
   create : bootexample/views/index.jade
   create : bootexample/views/layout.jade
   create : bootexample/views/error.jade
   create : bootexample/bin
   create : bootexample/bin/www

   install dependencies:
     $ cd bootexample && npm install

   run the app:
     $ DEBUG=my-application ./bin/www

Open a browser window with URL: localhost:3000

Getting Bootstrap into bootexample

First, downloaded Bootstrap, unzip it, and move the files to the proper directories in the bootexample tree i.e. css to public/stylesheets; js to public/javascripts and fonts to public/. This post is written using Bootstrap v3.1.1 which includes all responsive bits in it unlike earlier v2. Some of the files downloaded are redundant, for example bootstrap.css and bootstrap.min.css. The first is the long-form, easily readable version of bootstrap.min.css which minimises filesize by putting everything on a single line and saving lots of newline and space characters.

Second, include a bootstrap stylesheet and script in the project by editing views/layout.jade to look like this:

doctype html
html
  head
    title= title
    link(rel='stylesheet', href='/stylesheets/bootstrap.min.css')
    link(rel='stylesheet', href='/stylesheets/style.css')

  body
    block content
    script(src='javascripts/bootstrap.min.js') 

Refreshing the webpage should subtly change the font showing that bootstrap has overwritten the style.

Now we have a lot of css classes we can use to layout and style our webpage.

Grid Layout

The arrangement of content under bootstrap is done through containers, rows and columns in a grid system.  The grid is based on 12 columns which are sized according to the size of the display:

• xs: width < 768px
• sm: width < 992px
• md: width < 1200px
• lg: width >=1200px

How rows and columns work is best shown with an example. Here is an updated index.jade file from bootexample that demonstrates the use of bootstrap rows and columns.

extends layout

block content
  h1= title
  p Welcome to #{title}
  .container
    .row
      .col-md-12
        |Title of the content
    .row
      .col-md-4
        |Three short words
      .col-md-4
        |They shall grow not old, as we that are left grow old;
        |Age shall not weary them, nor the years condemn. 
        |At the going down of the sun and in the morning 
        |We will remember them. 
        |Lest we forget.
      .col-md-4
        |Quite a short sentence
        .row
          .col-lg-12 More Text 1
        .row
          .col-lg-6 More Text 2
          .col-lg-6 More Text 3

The following screenshots show how index.jade is rendered by the browser set to two different widths. I added a border to style.css to highlight the grid more clearly.

[class*="col-"] {
 border:1px solid #80aa00;
}

This first screenshot is with browser width > 992 i.e. 'md' and above

This screenshot is with browser width < 992 i.e. xs and sm.

So we can see that setting up your website in this way makes it reformat responsively to the format of the display.

If you want to make columns a fixed height you need to add some custom css to bootstrap (by adding it to style.css in our bootexample project) as described in Bootstrap 3 responsive columns of same height by Minimit. Here's what changing .col-md-4 to .col-md-4.col-md-height in index.jade looks like in our example:

General formatting of text

Common html/css styles such as headings, lists, quotes, tables, forms checkboxes etc. etc. are all described and examples given on the Bootstrap css overview page.

That should be enough to get you going but know that bootstrap can do so much more...